还在苦苦敲代码开发APP?你out啦! 试试积木搭建APP吧~

Access-Control-Allow-Origin与跨域

来源:清泛原创     2016-06-27 17:47:43    人气:     我有话说( 0 人参与)

No 'Access-Control-Allow-Origin' header is present on the requested resource.问题在某域名下使用Ajax向另一个域名下...

No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题

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

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

跨域

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

参考:

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

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

我在jsbin上 做了一个试验 ,使用Chrome打开。当点击“Run with Js”时,控制台上会打出:

XMLHttpRequest cannot load http://bbs.tsingfun.com/xxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.tsingfun.com' 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-Originhttps://www.tsingfun.com

如果它的值设为 * ,则表示谁都可以用:

Access-Control-Allow-Origin*

没错,在产品环境中,没人会用 *




Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
注释掉:aj.XMLHttpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Access-Control-Allow-Origin 跨域

注:本文为本站或本站会员原创优质内容,版权属于原作者及清泛网所有,
欢迎转载,转载时须注明版权并添加来源链接,谢谢合作! (编辑:admin)
分享到: