前端跨域问题及解决方案(9)

一个例子：
//http://foo.example站点的脚本向http://bar.other站点发送一个GET请求，并设置了一个Cookies值。脚本代码如下：var invocation = new XMLHttpRequest();var url = "http://bar.other/resources/credentialed-content/";function callOtherDomain(){ if(invocation) { invocation.open("GET", url, true); invocation.withCredentials = true; invocation.onreadystatechange = handler; invocation.send(); }}
如上，第七行代码将 XMLHttpRequest 的 withCredentials 标志设置为 true，从而使得 Cookies 可以随着请求发送。因为这是一个简单的 GET 请求，所以浏览器不会发送一个“预请求”。但是，如果服务器端的响应中，如果没有返回 Access-Control-Allow-Credentials: true 的响应头，那么浏览器将不会把响应结果传递给发出请求的脚本程序，以保证信息的安全。
假设服务器成功响应返回部分信息如下：
Access-Control-Allow-Origin: http://foo.exampleAccess-Control-Allow-Credentials: trueSet-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
如果 bar.other 的响应头里没有 Access-Control-Allow-Credentials: true，则响应会被忽略.。特别注意: 给一个带有 withCredentials 的请求发送响应的时候，服务器端必须指定允许请求的域名，不能使用 *。上面这个例子中，如果响应头是这样的 Access-Control-Allow-Origin: * ，则响应会失败。在这个例子里，因为 Access-Control-Allow-Origin 的值是 http://foo.example 这个指定的请求域名，所以客户端把带有凭证信息的内容被返回给了客户端。另外注意，更多的 Cookie 信息也被创建了。
CORS 的优点：CORS 支持所有类型的HTTP请求，是跨域 HTTP 请求的根本解决方案。