XuLaLa.Tech

在项目需求开发的过程中经常会碰到跨域的问题，一般都是在nginx添加配置来解决，其他的web服务器也类似，但是有一种特殊情况，接口跨域POST JSON的时候比较特别，如果只配置下面的规则，还是会存在问题。

        #   指定允许跨域的方法，*代表所有
add_header Access-Control-Allow-Methods *;
#   预检命令的缓存，如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
#   带cookie请求需要加上这个字段，并设置为true
add_header Access-Control-Allow-Credentials true;

发送POST请求如果存在Body参数，会发送两次请求，所以需要向下面这样配置

 location ~ ^/test/ {
#   OPTIONS预检命令，预检命令通过时才发送请求
#   检查请求的类型是不是预检命令
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Content-Type *;
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Headers *;
return 204;
}
rewrite ^/test/(.*) /$1 break;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Content-Type *;
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Headers *;
access_log /var/log/nginx/test.access.log;
proxy_set_header X-Forward-For $remote_addr;
proxy_set_header X-real-ip $remote_addr;
proxy_read_timeout 300s;
client_max_body_size 2g;
proxy_pass http://xxxx:8080;
}

简单请求和非简单请求是浏览器发出跨域请求的 两种不同的请求方式，我们来了解一下。

简单请求

发送的请求符合下面的所有情况，就属于简单请求。

• 请求方法为其中一种：GET、POST、HEAD；
• 除了浏览器自动设置的字段（比如 Connection），仅能人为设置请求头字段 Accept、Accept-Language、Content-Language、Content-Type 这个集合内的值。
• 请求头字段 Content-Type 为其中一种：text/plain、 multipart/form-data、application/x-www-form-urlencoded；

复杂请求

不符合简单请求规定条件的请求，就是 非简单请求。

对于简单请求，为了兼容，浏览器会直接将请求发出去。但非简单请求没有兼容的需要，所以浏览器给它加上了严格的复杂机制。

在发出真正的请求前，浏览器会先发一个 OPTION 请求来探探路，这个请求称为 预检请求（preflight）。

　预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容

• Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
• Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是- 复杂请求所使用的头部。