服务端跨域

发表于 | 分类于

一、反向代理服务器

基础思想很简单，将你的服务器配置成 需要跨域获取的资源的 反向代理服务器。
也就是说，将其他域名的资源映射到你自己的域名之下，这样浏览器就认为他们是同源的。
用大家钟爱的 Apache2 来举个例子：
首先启用两个模块 proxy 和 proxy_http 来开启代理功能：

sudo a2enmod proxysudo 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, 10 12 4

移动端的浏览器对这种方法的支持比较完善。现在我们看到了，如果不需要兼容 IE6、7的话，就可以使用这种方法。
这种跨域方案主要的思想是：服务器 在响应头中设置相应的选项，浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法，进而获取资源。
可以设置的响应头信息：

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

origin: 被允许跨域访问这个资源的网站，* 代表全部网站。浏览器会检测这个参数，如果符合要求，才会去获取资源。
举个例子，允许 http://qiaohongshen.github.io/foo来跨域访问这个资源：

1
2
3
Access-Control-Allow-Origin: http://jasonkid.github.io/fezone
Access-Control-Allow-Credentials
Access-Control-Allow-Credentials: true | false

表示是否允许浏览器携带 Cookie 来访问这个资源。这个属性要和 XMLHttpRequest 的 withCredentials属性来配合使用。

1
2
3
4
5
6
7
8
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 的资源请求需要满足以下几个条件：

  1. XMLHttpRequest
  2. 对象中指定了 withCredentials = true
  3. 服务器响应头中 Access-Control-Allow-Credentials: true
  4. 服务器响应头中 Access-Control-Allow-Origin不能为 *

以下选项主要是安全性配置的问题，主要是服务器的配置问题了，就不展开介绍了：

  • Access-Control-Expose-Headers
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers