Access-Control-Allow-Origin与跨域

Access-Control-Allow-Origin与跨域

时间 2014-03-27 20:24:31  Freewind.me原文  http://freewind.me/blog/20140327/2456.html

今天与萌萌一块儿修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: * 

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

你能够阅读下面这篇文章了解更多，并可找到其中的”Run Sample”连接，实际体验一下：

http://www.html5rocks.com/en/tutorials/cors/