Nginx解决跨域问题

---

同源策略

同源策略是浏览器最基本的安全策略，在同源策略下，当本域发起跨域请求时，客户端会限制加载响应的数据。这也就是说客户端发送了请求，服务端也响应了，但是响应数据不被客户端接受。

同源指的是协议、域名、端口均相同，任意一个不同都属于跨域，都会受到浏览器同源策略的限制。但是，对于加载其它域下的图片、css、js库等资源时并不算违背同源策略。

解决跨域问题

跨域请求时浏览器经常会提示 No 'Access-Control-Allow-Origin' header is present on the requested resource 这样的错误，解决跨域问题的方式也有多种，例如：jsonp、反向代理、跨域资源共享(Cross-origin Resource Shareing, CORS)，下面主要介绍如何通过配置Nginx来实现CORS，进而解决跨域问题。

在Nginx配置文件的http模块或者server模块中添加如下指令，当有跨域请求时，Nginx会自动在响应头添加指令所指定的字段。

  add_header Access-Control-Allow-Origin '$http_origin';
  add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type';
  add_header Access-Control-Allow-Methods 'GET, POST, DELETE, PUT, OPTIONS';
  add_header Access-Control-Allow-Credentials true;

(1) Access-Control-Allow-Origin
Access-Control-Allow-Origin字段是必选的，用来指定允许的源，有时候配置成 * 会不生效，上述使用了Nginx的变量$http_origin

(2) Access-Control-Allow-Headers
Access-Control-Allow-Headers字段是可选的，如果浏览器发起的请求中包含了Access-Control-Allow-Headers请求头，则响应头中必须添加Access-Control-Allow-Headers字段，值为逗号分隔的字符串

(3) Access-Control-Allow-Methods
Access-Control-Allow-Methods字段是必选的，用来指定允许跨域请求的方式，值为逗号分隔的字符串

(4) Access-Control-Allow-Credentials
Access-Control-Allow-Credentials字段是可选的，表示是否允许客户端发送Cookie，在跨域请求时请求头中默认是没有Cookie的，但是，需要服务端需要用户的登录状态时，就需要请求中带有Cookie，此时Access-Control-Allow-Credentials字段值设为true，用来明确表示允许客户端发送Cookie

---

参考文档

阮一峰的网络日志
MDN-HTTP访问控制(CORS)