今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清楚后记录下来。
在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 <code>Access-Control-Allow-Origin</code> 的header,才能让前者成功拿到数据。
这句话对吗?如果对,那么流程是什么样的?
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。
参考:
<a href="http://stackoverflow.com/questions/1077218/are-different-ports-on-the-same-server-considered-cross-domain-ajax-wise">Are different ports on the same server considered cross-domain? (Ajax-wise)</a>
<a href="http://twlidong.github.io/blog/2013/12/22/kua-yuan-zi-yuan-gong-xiang-cross-origin-resource-sharing-cors/">同事李栋的博客:跨源资源共享</a>
这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?
但开发者工具的”Network”栏并没有任何记录。它到底发请求了没?
我又使用 <code>python -m SimpleHTTPServer</code> 在本地创建了一个小服务器,然后把地址改成它,结果发现在python这边的确打印出请求来了,可见浏览器的确发出了请求。
现在该 <code>Access-Control-Allow-Origin</code> 出场了。只有当目标页面的response中,包含了 <code>Access-Control-Allow-Origin</code> 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:
如果它的值设为 <code>*</code> ,则表示谁都可以用:
没错,在产品环境中,没人会用 <code>*</code>
你可以阅读下面这篇文章了解更多,并可找到其中的”Run Sample”链接,实际体验一下:
<a href="http://www.html5rocks.com/en/tutorials/cors/">http://www.html5rocks.com/en/tutorials/cors/</a>
如何联系我:【万里虎】www.bravetiger.cn
【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起)
【博客】http://www.cnblogs.com/kenshinobiy/