服务端解决跨源共享

 

跨源资源共享是web开发领域中一个非常有趣的话题，互联网上有很多朋友讨论这个话题。跨源共享的官方文档可到这里查看，当然也有很多朋友给出各式各样的解决方案，确实都是OK的，但今天我分享的这套解决方案可能在以往的文章中很少看见—–我们如何在服务器端解决跨源资源共享的问题。

做过服务端开发的同学都知道服务器每次响应(http response)都会送回客户端一个http header，而这些http header数据中有时会带有Access-Control-Allow-Origin,请记住Access-Control-Allow-Origin不是每次都会response给客户端的，Access-Control-Allow-Origin通常是在开发者定义后会正确响应给客户端，Access-Control-Allow-Origin的意思是指定可访问控制的请求源，Access-Control-Allow-Origin字段有三种支持的值。
第一种是指定一个可访问控制的请求源，它的格式是一个完整的URL地址

 Access-Control-Allow-Origin: http://qiqicartoon.com

 以上代码表示服务器上的这个文件只允许http://qiqicartoon.com源访问。

第二种是指定多个可访问控制的请求源，它的格式是多个完整的URL地址，以空格分开

Access-Control-Allow-Origin: http://qiqicartoon.com http://demo.qiqicartoon.com:8080

 第三种是可以允许任何可访问控制的源，它的格式是一个通配符*

Access-Control-Allow-Origin: *

  如果服务器上的某个文件需要向任何一个没有认证的源提供访问权限的话，可以指定通配符*值

请注意，不是所有的浏览器都支持Access-Control-Allow-Origin字段，但目前主流的浏览器基本都支持。

Apache中可以执行命令a2enmod headers来暴露Access-Control-Allow-Origin,Access-Control-Allow-Origin成功暴露后，你可以在<Directory>, <Location>, <Files> or <VirtualHost> 中或者一个.htaccess文件中添加以下代码

Header set Access-Control-Allow-Origin *

 当然你也可以使用add而不是set，使用add可以多次添加，因为基于安全的考虑我们可能会使用add。记住修改成功后，重启apache。

在IIS6中暴露Access-Control-Allow-Origin，可通过以下步骤：
1：打开IIS服务器管理
2：右键点击你想启用CORS的站点，选择属性
3：选择Http header tab
4：在自定义http header中选择添加
5：输入Access-Control-Allow-Origin作为一个header信息
6：输入通配符*作为header的值
7：两次点击OK

IIS7中可以复制以下代码到你站点或应用程序根目录下的web.config文件中

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

 如果你的目录中没有web.config，你可以先手动新建一个web.config

在基于NodeJS的ExpressJS中可以添加以下代码，以启用CORS

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

app.get('/', function(req, res, next) {

});

app.post('/', function(req, res, next) {

});

 在PHP中，如果你没有权限访问Apache config文件，你同样可以启用CORS

header("Access-Control-Allow-Origin: *");

 请注意在PHP语言中，使用 header function，必须要把它放在任何脚本输出之前。

在ASP.NET中，如果你没有权限访问IIS配置文件，你同样也可以启用CORS

Response.AppendHeader("Access-Control-Allow-Origin", "*");

 这种方法同样适用于IIS6 IIS7传统模式，以及IIS5综合模式

在APP Engine中，比如在Google APP Engine的Python application中，这个self.response.headers.add_header()可以使用

class CORSEnabledHandler(webapp.RequestHandler):
  def get(self):
    self.response.headers.add_header("Access-Control-Allow-Origin", "*")
    self.response.headers['Content-Type'] = 'text/csv'
    self.response.out.write(self.dump_csv())

 谁已经开始在服务端开始CORS了(据我也了解到的)？

HTML5 Rocks一个开源的HTML5开发者资源共享网站
WebKit WebKit宣布在WebGL mailing list，CORS支持图片和视频资源已经完全实施了。
火花集 中国一家创意图片分享网站。

有兴趣的话，你还可以阅读MDN的一篇文章