http://www.tuicool.com/articles/7FVnMz
今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清楚后记录下来。
问题
在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功拿到数据。
这句话对吗?如果对,那么流程是什么样的?
跨域
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。
参考:
Are different ports on the same server considered cross-domain? (Ajax-wise)
同事李栋的博客:跨源资源共享
当跨域访问时,浏览器会发请求吗
这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?
我在jsbin上 做了一个试验 ,使用Chrome打开。当点击“Run with Js”时,控制台上会打出:
XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.
但开发者工具的”Network”栏并没有任何记录。它到底发请求了没?
我又使用 python -m SimpleHTTPServer 在本地创建了一个小服务器,然后把地址改成它,结果发现在python这边的确打印出请求来了,可见浏览器的确发出了请求。
Access-Control-Allow-Origin
现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:
Access-Control-Allow-Origin: http://run.jsbin.io
如果它的值设为 * ,则表示谁都可以用:
Access-Control-Allow-Origin: *
没错,在产品环境中,没人会用 *
你可以阅读下面这篇文章了解更多,并可找到其中的”Run Sample”链接,实际体验一下:
http://www.html5rocks.com/en/tutorials/cors/
分享到:
相关推荐
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效。 if ($request_method = '...
谷歌跨域插件Access-Control-Allow-Origin
允许CORS:通过Access-Control-Allow-Origin,您可以轻松地在Web应用程序中执行跨域Ajax请求。 只需激活插件并执行请求。默认情况下(在JavaScript API中),CORS或跨源资源共享在现代浏览器中被阻止。安装此加载项...
静态文件访问不到报No 'Access-Control-Allow-Origin' header is present on the requested resource处理办法
跨域 CORS Access-Control-Allow-Origin cors-filter-2.6.jar java-property-utils-1.9.1.jar
谷歌浏览器扩展程序一键解决本地开发跨域问题,让你不用乱mock数据,Access-Control-Allow-Origin工具包
Allow CORS: Access-Control-Allow-Origin允许您在web应用程序中轻松执行跨域Ajax请求。
允许CORS:通过Access-Control-Allow-Origin,您可以轻松地在Web应用程序中执行跨域Ajax请求。 描述: 轻松将(Access-Control-Allow-Origin:*)规则添加到响应标头。 允许CORS:通过Access-Control-Allow-Origin...
Access-Control-Allow-Origin跨域问题的终极解决,给自己做备份,内含允许访问特定域名或多个域名
解决浏览器跨域请求出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.问题
ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全...因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
allow-cors-access-control插件,解决跨域问题,内含使用教程
chrome跨域插件CORS离线下载,解压后有两个压缩包,直接把B压缩包拖放到chrome插件管理页面即可。或者解压A压缩包得到一个crx文件和一个zip文件,把这两个中的任一个拖放到插件管理页面即可。
Allow_CORS__Access-Control-Allow-Origin
chrome插件,chrome跨域访问插件,chrome跨域,网页跨域,Access-Control-Allow-Origin, 请打开chrome等同核心的浏览器-->设置-->扩展程序-->把解压的crx文件拖入其中。
主要给大家介绍了关于Nginx配置跨域请求Access-Control-Allow-Origin * 的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
跨域Access-Control-Allow-Origin解决方案.docx
主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了Ajax 设置Access-Control-Allow-Origin实现跨域访问,非常不错,具有参考借鉴价值,需要的朋友可以参考下
解决Chome跨域插件!