Nginx解决个别接口CORS跨域

ゞ浪人与酒丶0

已于 2022-03-14 21:06:35 修改

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： nginx 线上故障文章标签： nginx 前端 http

于 2022-03-13 23:38:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41977838/article/details/123469030

nginx 同时被 2 个专栏收录

2 篇文章

订阅专栏

线上故障

2 篇文章

订阅专栏

本文介绍了如何通过Nginx配置处理前端发起的Ajax请求时遇到的跨域问题，重点讲解了如何过滤OPTIONS请求并返回成功，确保后续POST请求的顺利进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端Ajax或Axios等XMLHttpRequest请求一个第三方的接口时，会出现跨域问题。

简单请求与复杂请求的差别是复杂请求会自动发出一个 OPTIONS 的预检请求，当请求得到确认后，才开始真正发送请求。

综上，我们要解决两个问题：

OPTIONS 请求的正确响应
跨域请求正确响应

解决方案

只需在Nginx侧过滤掉OPTIONS请求，不转发给第三方接口，直接在Nginx就返回前端。前端就会认为OPTIONS请求成功了继续发送POST请求，此时Nginx将此次的POST请求真正转发给第三方接口。


location /test {
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin $http_origin; # 必须要有
        add_header Access-Control-Allow-Headers *; # 必须要有
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        return 200; # 204也可以，只要返回成功码即可
    }
    proxy_pass  http://abc.com/def;
}