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/





相关文章推荐

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

问题: 网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify。 然后ajax就报错:No 'Access-Control-Allow-Origin' heade...

ajax 设置Access-Control-Allow-Origin实现跨域访问

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

浏览器跨域问题Access-Control-Allow-Origin

关于浏览器跨域问题Access-Control-Allow-Origin 摘要: Access-Control-Allow-Origin,跨域,解决方案 其实很早就接触过前端开发...

[Access-Control-Allow-Origin]Web中使用filter实现跨域访问问题

web.xml配置过滤器在web.xml中定义一个isCross初始化变量,用于开启是否允许跨域访问。这将很好的控制跨域访问问题。 ...

servlet过滤器实现跨域Access-Control-Allow-Origin

1.定义过滤器接口Filter的实现类,实现类中修改respone的头信息,把 “Access-Control-Allow-Origin” 的域名修改问请求方的域名,如下:package filter...

Access-Control-Allow-Origin与跨域

转自:http://www.tuicool.com/articles/7FVnMz 今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清...

Access-Control-Allow-Origin 站点跨域请求的问题

闲暇之时,做了一个博客站点,站点发布网络之后程序功能完成,最后发现了一个跨域的问题,比如我使用abc.com打开系统,一切正常,后台没有任何文件请求报错问题,然后我又使用了www.abc.com再试一...

HTML5开发中Access-Control-Allow-Origin跨域问题

http://www.uedsc.com/access-control-allow-origin.html 今天准备通过JavaScript的方式调用问说问答的内容,由于使用的不同的...
  • changjn
  • changjn
  • 2015年12月23日 10:07
  • 2200

Ajax Access-Control-Allow-Origin实现跨域访问用法

欢迎大家关注我的其他Github博客和简书,互相交流! 如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。 所以通过设置Access-...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Access-Control-Allow-Origin与跨域
举报原因:
原因补充:

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