CORS 跨域 POST 请求会出 OPTION 与请求,导致 2 次请求该如何优化?

[stille]

前端 POST json 格式提交会发 OPTION 预请求,返回 200,在发主请求,导致后端收到两次请求.

于是在 nginx 里配置如下:

    if ($request_method = 'OPTIONS') {
        proxy_pass http://127.0.0.1:33333;
    }

	proxy_pass http://127.0.0.1:44444;
    

第一次 OPTION 请求发给另外一个端口 33333,第二次请求发送给真正的后端 44444 ,是可以解决这个问题.

但是 33333 这个端口要是 502 404 等错误,也会导致第二次请求发不出去..而且这么搞感觉也不优雅...

在无法修改后端的情况下,还有什么方法能优化?

[Terry05]

我村的做法是检查到 methods = 'OPTIONS' 直接返回 204 状态

[TsubasaHanekaw]

你都能改 nginx 了 为什么还要走 cors 跨域呢.

[creanme]

直接把前端请求转发到后端地址？这样就不会出现跨域了。

[TsubasaHanekaw]

直接 nginx 就能返回 200
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
return 200;
}

[sanmaozhao]

直接返回内容就行了啊，不用再转发给后端了。比如:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Content-Length' 0;
return 204;

或者用这个思路：
既然都有 nginx 了，不能把前端页面和转发的后端请求都放进来么？这样就不跨域了

[NjcyNzMzNDQ3]

按#1 的方法做就行，option 只是测试跨域的

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

if ($request_method = 'OPTIONS') {
return 204;
}

[stille]

@Terry05 @sanmaozhao @NjcyNzMzNDQ3 @TsubasaHanekaw

谢谢各位,刚发完贴我就想到这种直接 return 形式...果然..我去试试

[stille]

@creanme
@TsubasaHanekaw

特殊情况,前后端不再一起也用的不同域名.

[also24]

哈哈哈哈楼主这个提问，让我想起了 @mitu9527 的这个旧贴 https://www.v2ex.com/t/703603

[scemsjyd]

OPTION 响应 Header 中通过下面这个属性控制 OPTION 请求的缓存时间
Access-Control-Max-Age: 7200
可以减少 OPTION 请求次数

[stille]

@scemsjyd 嗯,这个配置过了..但过期或者首次还是会有问题.

[stille]

@also24 谢谢.去看看

[also24]

@stille #12
那个主题下的回复方向相对比较散，建议先看 18# 我的回复 🙄

[qwerthhusn]

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type,Accept,Origin,User-Agent,Cache-Control,X-User-Token,X-Transaction-ID,X-Requested-With' always;
add_header 'Access-Control-Allow-Methods' '*' always;
add_header 'Access-Control-Max-Age' '3600' always;

if ($request_method = 'OPTIONS') {
return 204;
}


1. Access-Control-Allow-Headers，如果你们的工程有自定义的头，需要加进去
2. Access-Control-Max-Age 要设置有效时间，浏览器会记录此时间，在此时间内此域名不再发送 options 请求，不然每次请求都会重新发一次 OPTIONS

[stille]

@qwerthhusn 奇怪了

add_header 'Access-Control-Max-Age' '3600' always;

设置了,但是每次请求还是有预请求

[qwerthhusn]

@stille 如果用的 F12 看的，先把 Disable Cache 不要勾选。让浏览器走缓存

[ch2]

OPTION 只要是跨域请求都会自动发的，这个是浏览器的机制

[vance123]

@qwerthhusn 纠正下，Access-Control-Max-Age 仅对单个资源也就是 url 有效，不同的 url 会发起新的 preflight 请求。

https://stackoverflow.com/questions/42131714/cors-access-control-max-age-works-for-same-origin-or-just-same-request-url