当前页面的脚本发生错误 为空或不是对象 JavaScript 中的 HTTP 跨域请求

了解了简单跨域请求以及会发出 preflight 请求的非简单跨域请求之后，我们再来看看究竟是哪些 HTTP 头在决定这些跨域请求的「宿命」。

为了帮助读者更好地理解这些 HTTP 头的作用，我编写了一个简单的 demo ，开源在了 GitHub 上，感兴趣的可以到 这个链接查看代码 ，或者访问这个在线 demo 预览效果：:3334/。记得加载完页面后打开 Chrome 的控制台来查看详细的请求信息。

Access-Control-Allow-Origin

Access-Control-Allow-Origin 是一个响应头，它指定了当前资源允许被哪些域名的脚本所请求到。

跨域请求（无论简单请求还是非简单请求）在发出时都会带上 Origin 请求头，用来表明当前发出请求的是哪一个域名。此时服务器端的响应头里面必须包含一个 Access-Control-Allow-Origin 并且该值匹配 Origin 请求头，这时候该跨域请求才有可能成功。否则一律失败。

Access-Control-Allow-Origin 是第一道门槛。其值的匹配规则是：

具体可以观看 demo，demo-0展示了当脚本请求没有配置跨域头的接口时，请求被浏览器拦截了的情况：

demo-1则展示了接口有配置 Access-Control-Allow-Origin 响应头，但是并非脚本请求的域名，此时浏览器会报这种错：

只有配置了正确的 Access-Control-Allow-Origin 响应头请求才能够正常接收到响应，如 demo-2 ，此时的请求头和响应头为：

GET /api2 HTTP/1.1Host: us1.serenader.me:3333Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Origin: http://us1.serenader.me:3334User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36Accept: */*
Referer: http://us1.serenader.me:3334/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,fr;q=0.2

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Type: text/html; charset=utf-8Content-Length: 2ETag: W/"2-REvLOj/Pg4kpbElGfyfh1g"Date: Thu, 19 Jan 2017 15:03:33 GMT
Connection: keep-alive

对于简单的跨域请求来说，通常只需要通过 Access-Control-Allow-Origin 这个响应头则可以请求成功（带 cookie 等情况先不考虑，会在下面讨论）。而当请求不是简单的跨域请求，情况就比较复杂。

Access-Control-Allow-Headers

Access-Control-Allow-Headers 是用来告诉浏览器当前接口所允许带上的特殊请求头是哪些。这个 HTTP 头一般会出现在 OPTIONS 请求的响应头中。