之前我们讲了一下四种 JavaScript 跨域的体式格局 – 「JavaScript」四种跨域体式格局详解。这四种体式格局是运用纯 JavaScript 来举行跨域的。

本日就引见两种有涉及到服务器的跨域手艺。

一、反向代办服务器

基本头脑很简单，将你的服务器设置成 须要跨域猎取的资本的 反向代办服务器。

也就是说，将其他域名的资本映照到你本身的域名之下，如许浏览器就以为他们是同源的。

用人人宠爱的 Apache2 来举个例子：

起首启用两个模块 proxy 和 proxy_http 来开启代办功用：

sudo a2enmod proxy
sudo a2enmod proxy_http

然后在设置文件内里写入：

ProxyPass "/foo" "http://foo.example.com/bar"
ProxyPassReverse "/foo" "http://foo.example.com/bar"

• ProxyPass: 长途服务器在当地服务器的映照。（上面的例子将 http://foo.example.com/bar 映照为 /foo）

• ProxyPassReverse: 设置 Apache2 在 HTTP 跳转时调解 Location, Content-Location 和 URI headers 的值，防备反向代办被绕开。

重启 Apache2：

sudo service apache2 restart

功德圆满，如许我们要求 /foo 就会获得 http://foo.example.com/bar 的内容了。

这类要领实在不太经常使用，机灵的读者就会发明，每个资本都要到本身的服务器设置，每次设置都还要重启。

二、CORS

Cross-Origin Resource Sharing 是 W3C 推出的一种跨站资本猎取的机制。

起首我们来看一下浏览器的支撑状况：

挪动端的浏览器对这类要领的支撑比较完善。
如今我们看到了，假如不须要兼容 IE6、7的话，就可以运用这类要领。

这类跨域计划重要的头脑是：服务器 在响应头中设置响应的选项，浏览器假如支撑这类要领的话就会将这类跨站资本要求视为正当，进而猎取资本。

可以设置的响应头信息：

Access-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> | *

origin: 被许可跨域接见这个资本的网站，* 代表悉数网站。浏览器会检测这个参数，假如符合要求，才会去猎取资本。

举个例子，许可 http://jasonkid.github.io/fezone 来跨域接见这个资本：

Access-Control-Allow-Origin: http://jasonkid.github.io/fezone

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

示意是不是许可浏览器照顾 Cookie 来接见这个资本。
这个属性要和 XMLHttpRequest 的 withCredentials 属性来合营运用。

var xhr = new XMLHttpRequest();
var url = 'http://foo.other/resources/credentialed-content/';
    
if(xhr) {
    xhr.open('GET', url, true);
    xhr.withCredentials = true; // 设置带有 Cookie 的资本要求
    xhr.onreadystatechange = handler;
    xhr.send(); 
}

可以胜利运用带有 Cookie 的资本要求须要满足以下几个前提：

• XMLHttpRequest 对象中指定了 withCredentials = true

• 服务器响应头中 Access-Control-Allow-Credentials: true

• 服务器响应头中 Access-Control-Allow-Origin 不能为 *

以下选项重如果安全性设置的题目，重如果服务器的设置题目了，就不睁开引见了：

• Access-Control-Expose-Headers

• Access-Control-Allow-Methods

• Access-Control-Allow-Headers

其他四种跨域体式格局

「JavaScript」四种跨域体式格局详解