使用nginx解决Access-Control-Allow-Origin问题

岑如花

于 2021-10-29 10:51:27 发布

阅读量1.6w

点赞数 1

分类专栏： react 前台文章标签： nginx 服务器运维

本文链接：https://blog.youkuaiyun.com/qwe885167759/article/details/121030133

版权

react 同时被 2 个专栏收录

11 篇文章

订阅专栏

前台

2 篇文章

订阅专栏

当前台访问不同IP的Nginx服务器时，可能会遇到'No 'Access-Control-Allow-Origin' header is present on the requested resource'的错误。这是由于浏览器的同源策略限制。为了解决这个问题，需要在Nginx的配置文件nginx.conf中添加响应头。在location / 或者特定路由下插入以下代码：`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';`。这将允许来自任何来源的请求，并指定可接受的方法和头部。

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

前台在访问不同ip的nginx服务器时报：No ‘Access-Control-Allow-Origin’ header is present on the requested resource
原因：被请求的资源没有设置 ‘Access-Control-Allow-Origin’，也就是nginx的返回信息头没有Access-Control-Allow-Origin（也就是浏览器同源策略，大家可以自行百度）
解决方案：
在nginx中的nginx.conf中的路由中添加以下代码：

location / {  
    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';
}