Nginx系列8：跨域访问的配置

1. 什么是跨域访问？

跨域是指从一个域名的网页通过js脚本去请求另一个域名的资源（仅仅通过a标签之类的链接请求不算跨域访问）。比如从www.a.com 的页面去请求 www.b.com 的资源。

2. 为什么浏览器要限制跨域访问呢？

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题(CSRF跨站攻击)：

用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器
用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。
如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。
所以浏览器默认的跨域请求是被禁止的，要想进行跨域请求，就需要进行相关配置。

3. 为什么要跨域？

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

4. 跨域配置

只需要在Nginx配置文件里加入以下配置，即可开启跨域

add_header Access-Control-Allow-Origin *;

*代表任何域都可以访问，可以改成只允许某个域访问，如Access-Control-Allow-Origin http://www.joyitsai.com
这样的配置虽然开启了跨域请求，但只支持GET HEAD POST OPTIONS请求，使用DELETE发起跨域请求时，浏览器出于安全考虑会先发起OPTIONS请求，服务器端接收到的请求方式就变成了OPTIONS，所以引起了服务器的405 Method Not Allowed。

所以要对OPTIONS请求进行处理

if ($request_method = 'OPTIONS') { 
    add_header Access-Control-Allow-Origin *; 
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    #其他头部信息配置，省略...
    return 204; 
}

当请求方式为OPTIONS时，设置Allow的响应头，重新处理这次请求。
配置好并重启Nginx，刷新页面重新发起请求，在控制台里你会发现，出现了二次请求，第一次是OPTIONS请求，第二次才是DELETE请求，这就是对OPTIONS请求进行处理的结果，到这里总算完成了一次DELETE跨域请求了。

5. 完整配置参考

add_header Access-Control-Allow-Origin http://www.joyitsai.com;
location / {
    if ($request_method = 'OPTIONS') { 
        add_header Access-Control-Allow-Origin *; 
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        return 204; 
    }
    index html;
    root xx.html;
}