之前我们讲了一下四种 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 推出的一种跨站资源获取的机制。
首先我们来看一下浏览器的支持情况:
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|
4 | 3.5 | 8 & 9(XDomainRequest), 10 | 12 | 4 |
移动端的浏览器对这种方法的支持比较完善。
现在我们看到了,如果不需要兼容 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」四种跨域方式详解