跨域与nginx实现

# 跨域是什么

简单的说就是 浏览器在www.xxxx.com页面访问了别的 URL(注:URL由协议、域名、端口和路径组成).

比如浏览器页面 https://www.baidu.com时

我们访问了以下url时都是跨域:

http://www.baidu.com

https://api.baidu.com

https://www.baidu.com:9999

 

# 同源策略

听起来很正常的事情,我们为什么要特地去“实现呢”.

这就要说到浏览器的通源策略了.

浏览器的同源策略，限制了来自不同源的”document”或脚本，对当前”document”读取或设置某些属性。 从一个域上加载的脚本不允许访问另外一个域的文档属性。

 

# 跨域实现

# 服务器端设置请求头Access-Control-Allow-Origin等请求头:

1. Access-Control-Allow-Origin: 允许跨域访问的域，可以是一个域的列表，也可以是通配符"*"。这里要注意Origin规则只对域名有效，并不会对子目录有效。即http://baidu.com/subdir/ 是无效的。但是不同子域名需要分开设置，这里的规则可以参照同源策略
2. Access-Control-Allow-Credentials: 是否允许请求带有验证信息，这部分将会在下面详细解释
3. Access-Control-Expose-Headers: 允许脚本访问的返回头，请求成功后，脚本可以在XMLHttpRequest中访问这些头的信息(貌似webkit没有实现这个)
4. Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据，非常有用，大幅优化请求次数
5. Access-Control-Allow-Methods: 允许使用的请求方法，以逗号隔开
6. Access-Control-Allow-Headers: 允许自定义的头部，以逗号隔开，大小写不敏感

# options

当跨域请求发生时.

浏览器会自动先发送一个options方法的请求预检.

我们要专门对options请求响应,告诉浏览器可以跨域访问,  同时避免运行api接口.

# 注意

Access-Control-Allow-Origin 如果设置为全部域可以访问,那所有重要资源都要做好安全校验.因为这等于放弃了很大一部分浏览器同源策略的保护.

 

# nginx配置文件

server {
        listen       5001;
        server_name  localhost;

        #charset koi8-r;
        # 日志文件
        access_log  logs/host.access.log  main;

        location / {
        # CORS
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        if ($request_method = 'OPTIONS') {
                return 204;
        }

        # proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:5000;
        }
        #......省略一万字..........
 }