Access-Control-Allow-Origin与跨域

转载 2015年07月08日 15:57:54

转自:http://www.tuicool.com/articles/7FVnMz


今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清楚后记录下来。

问题

在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功拿到数据。

这句话对吗?如果对,那么流程是什么样的?

跨域

怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。

参考:

当跨域访问时,浏览器会发请求吗

这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?

我在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/





thinkphp ajax 跨域请求 Access-Control-Allow-Origin 完美解决

ajax跨域请求出问题,一般有以下几种情况:1、直接打开本地文件夹的 .html等文件来ajax请求服务器数据,浏览器网址显示类似如下,以“file”开头:file:///Users/username...
  • abs1004
  • abs1004
  • 2017年08月08日 12:41
  • 1853

Flask: Ajax 设置Access-Control-Allow-Origin实现跨域访问;Ajax页面底部自动加载

问题: 网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify。 然后ajax就报错:No 'Access-Control-Allow-Origin' heade...
  • Kevin_QQ
  • Kevin_QQ
  • 2016年06月26日 10:31
  • 6542

Ajax访问Servlet的跨域请求问题—Access-Control-Allow-Origin

用户名: 密码: $('#sender').click(function(){ var userName=document.getElementById('userName').va...
  • guoquanyou
  • guoquanyou
  • 2017年03月16日 20:11
  • 1486

解决axios跨域请求出错的问题

错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Ori...
  • Brave_Coder
  • Brave_Coder
  • 2017年08月11日 22:48
  • 8811

CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)

问题说明 当出现上图这个的时候,求是访问请求其他域无法访问,浏览器访问其他域不安全,导致访问不了简称跨域问题。而这上面出现一句很重要的话“NO Access-Control-Allow-Origin...
  • rth362147773
  • rth362147773
  • 2017年12月16日 02:34
  • 404

js跨域No 'Access-Control-Allow-Origin' header is present---js跨域英文翻译是cross-origin

现象:F12控制台报错如下 XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' he...
  • lsm135
  • lsm135
  • 2016年10月20日 23:53
  • 769

[Ajax]设置Access-Control-Allow-Origin实现跨域访问(Header)

ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp...
  • Qiang1370373713
  • Qiang1370373713
  • 2016年08月10日 12:19
  • 4501

Node+Express的跨域访问控制问题:Access-Control-Allow-Origin

项目A通过Ajax访问项目B的接口,获取json数据,项目B采用Node+Express技术栈。项目A可能遇到跨域访问控制问题。报错如下: XMLHttpRequest cannot load ht...
  • shelly1072
  • shelly1072
  • 2017年02月12日 18:21
  • 5919

Java WEB程序 Ajax Access-Control-Allow-Origin 跨域 拦截器解决方案

我们在开发过程中,会遇到服务端是一个端口,WEB端是另一个端口的情况,这个时候ajax发起请求到服务端就会出现跨域的问题。具体情况如下:Error: XMLHttpRequest cannot loa...
  • ZeroSO
  • ZeroSO
  • 2016年11月24日 11:17
  • 2380

nginx允许所有二级域名跨域请求

w3c标准中,跨域请求可以添加http header:Access-Control-Allow-Origin,但在w3c中有如下限制: Access-Control-Allow-Or...
  • newjueqi
  • newjueqi
  • 2016年05月12日 17:13
  • 5932
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Access-Control-Allow-Origin与跨域
举报原因:
原因补充:

(最多只允许输入30个字)