记一次nginx解决跨域问题

最新推荐文章于 2024-05-29 10:20:03 发布

原创最新推荐文章于 2024-05-29 10:20:03 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx

nginx 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用Nginx解决跨域问题，包括为简单请求添加响应头及处理预检请求的方法，确保跨域请求顺利进行。

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

关于跨域是什么、产生跨域的条件等基础概念，我就不在此记录了。我们直接来看nginx解决跨域的方法。

对于简单请求添加响应头

location / {
    add_header Access-Control-Allow-Origin *;
}

或者

http {
    add_header Access-Control-Allow-Origin *;
}

添加完成后，reload重载nginx配置文件。
可以在网络请求中验证是否加入成功，在这里插入图片描述

如果上面方法不管用，那你就要看你的跨域请求是不是options了。
MDN的CORS一文中提到：

规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

如下图产生的options请求，在这里插入图片描述我设置了响应头，解决了问题。设置方式如下：

location ~ /number/ {
         if ($request_method = 'OPTIONS') {
                 add_header Access-Control-Allow-Origin *;
                 add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
           add_header Access-Control-Allow-Headers X-Requested-With;
                 return 200;
          }

有些文章给的设置会报 来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'x-request缺失，
把我上面的 来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'x-reques添上就能解决这个问题了。