Access-Control-Allow-Origin与跨域
来源:互联网 发布:linux ftp登录 编辑:程序博客网 时间:2024/05/29 17:23
今天与萌萌一起修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: *
没错,在产品环境中,没人会用 *
解决方案如下:
Access-Control-Allow-Origin
必须设置为具体的域名,而不能设置为*。
例如:
Access-Control-Allow-Origin: http://foo.example
简单原因:
Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding.
引用自HTTP access control (CORS) - HTTP | MDN
标准写法是Access-Control-Allow-Origin
~~但是你截图里返回的是小写的,服务器配置里改成大写看看。~~
另外Access-Control-Allow-Methods
这个字段也是必须的。
建议后台添加如下配置:
add_header 'Access-Control-Allow-origin' 'http://www.example.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST';
你用了withCredentials,需要在服务器返回Header中加入Access-Control-Allow-Credentials: true
,参考MDN。- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- Access-Control-Allow-Origin与跨域
- 跨域问题:Access-Control-Allow-Origin
- 跨域问题Access-Control-Allow-Origin
- Access-Control-Allow-Origin跨域问题
- Access-Control-Allow-Origin 跨域问题
- Access-Control-Allow-Origin跨域问题
- Access-Control-Allow-Origin 跨域问题
- Access-Control-Allow-Origin
- Access-Control-Allow-Origin与Ajax跨域
- Access-Control-Allow-Origin跨域请求以及隐患
- 关于Access-Control-Allow-Origin的跨域错误解决
- access-Control-Allow-Origin跨域请求安全隐患
- Unity3D 自动添加Fbx Animation Event
- SpringBoot之Mybatis篇(注解&配置文件)(MVC版)
- 欢迎使用CSDN-markdown编辑器
- 数据结构——离散事件模拟
- iOS webview与Js的交互。以及修改cookie、header头
- Access-Control-Allow-Origin与跨域
- Oracle与Sql Serer的链接桥梁之透明网关的部署与配置详解(二)安装GateWays
- 关于Monkey的一切都在这里
- Java HashMap、HashTable详解
- Problems encountered during text search
- Android架构思考(模块化、多进程)(转载学习)
- Linux上部署web应用(mysql,tomcat)
- js事件冒泡和委托
- OpenCV对数极变换变换示例