CORS相关

相关知识

CORS，全称Cross Origin Resource Sharing（跨域资源共享）。当浏览器请求不同的域名，不同的协议(http、https)，不同的端口时就会发生跨域。
CORS请求有两种类型：
1.简单请求，简单请求会直接请求服务端，不会触发OPTIONS预检请求

• 请求方法为这三种之一：GET、HEAD、POST
• 允许人为设置字段的头部为：Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width
• Content-Type值为这三种之一：text/plain、multipart/form-data、application/x-www-form-urlencoded
  

（图片来源mdn）

2.复杂请求，不满足以上条件的请求就是复杂请求。浏览器在检测当一次请求是复杂情况时，会首先使用OPTIONS方法发起一个预检请求到服务端，以获知服务器是否允许本次请求。

其中服务器返回的重要字段信息：

• Access-Control-Allow-Origin，表明服务器的资源可以被哪些域访问，如果值为"*"，则任何域都可以访问资源，如果设为“http://foo.example”，则限定域为http://foo.example
• Access-Control-Allow-Methods：服务端允许的跨域访问方法，可以指定为：GET、POST等
• Access-Control-Allow-Methods：服务端允许的请求头部字段
• Access-Control-Allow-Credentials：一般而言，浏览器在发起跨域请求时不会携带cookie信息，需要在请求时手动设置Access-Control-Allow-Credentials为true。随后收到服务端的响应头部中，如果未携带 Access-Control-Allow-Credentials: true，浏览器不会将响应发给实际请求者。注意，浏览器发起的附带身份信息的请求，服务器不得设置 Access-Control-Allow-Origin 的值为"*"

服务端配置

通过以上描述可以看出，后端服务在响应时需要带上Access-Control-Allow相关的头部。当后端服务有多个时，在每个服务中设置跨域头部显然是一件麻烦的事情。我们在nginx层去做配置，配置例子如下所示：

server {
	listen 80;
	server_name 127.0.0.1
    valid_referers localhost 127.0.0.1;
    if ($invalid_referer) {
       return 403;
    }
    location / {
        proxy_pass  127.0.0.1:9000;
        proxy_connect_timeout    10s;
        proxy_read_timeout       10s;
        proxy_send_timeout       10s;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_buffering  off;
        proxy_buffer_size 64k;
        proxy_buffers 8 64k;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin "$http_origin";
            add_header Access-Control-Allow-Methods PUT,POST,GET,DELETE,OPTIONS;
            add_header Access-Control-Allow-Headers "Origin,Content-Type,Accept,Authorization";
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Max-Age 2592000 ;
            return 204;
        }
        if ($http_origin ~* "(biz)\.com$|http://localhost(:\d+)?") {
                        add_header Access-Control-Allow-Origin "$http_origin" ;
                        add_header Access-Control-Allow-Methods PUT,POST,GET,DELETE,OPTIONS;
                        add_header Access-Control-Allow-Headers "Origin,Content-Type,Accept,Authorization";
                        add_header Access-Control-Allow-Credentials true;
                        add_header Access-Control-Max-Age 2592000;
        }
        }

}