脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → nginx 配置跨域失效修复

nginx 配置跨域失效修复的方法示例

 更新时间：2019年10月18日 08:31:35   作者：luckyjiet  
这篇文章主要介绍了nginx 配置跨域失效修复的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

nginx 配置跨域不生效 如下配置

server {
  listen  80;
  server_name localhost;
  
  # 接口转发
  location /api/ {
   # 允许请求地址跨域 * 做为通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 设置请求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 设置是否允许 cookie 传输
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 设置请求头 这里为什么不设置通配符 * 因为不支持
   add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
   # 设置反向代理 
   proxy_pass 127.0.0.1:8081/;
  }
 }

网上的 nginx 跨域配置主要是以上版本，然而很多都是抄一抄，并没有真的去实践，故写了下文章提醒下有需要的人，不要盲目抄，学会分析。

nginx 修改如下配置后生效

server {
  listen  80;
  server_name localhost;
  
  # 接口转发
  location /api/ {
   # 允许请求地址跨域 * 做为通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 设置请求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 设置是否允许 cookie 传输
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 设置请求头 这里为什么不设置通配符 * 因为不支持
   add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
   
   # 设置 options 请求处理
   if ( $request_method = 'OPTIONS' ) { 
    return 200;
   }
   # 设置反向代理 
   proxy_pass 127.0.0.1:8081/;
  }
 }

两者代码区别 主要就是下面这行代码

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

因为 post 请求 浏览器会发送一个 options 的预检请求，主要将本次的请求头 发送给服务端，若服务端允许，再发送真正的post请求，所以 f12 看到，经常 post 会发送两次请求。因为后端 java 代码没有对 options 请求做出处理，导致 options 接口请求的时候，报 403 forbidden , 这里 nginx 对 options 的请求直接返回 200，不用到达接口层，直接允许 post 响应头，即可使得上述失效配置能够生效

附赠 一个小知识点

proxy_pass 127.0.0.1:8081/;

针对反向代理里面这个/ 加不加的问题；

访问 http://localhost/api/user/login;

  • 加/ 则 实际访问的是 127.0.0.1:8081/user/login;
  • 不加 / 则实际访问的是 127.0.0.1:8081/api/user/login;

加了斜杠意味着所有的 /api 请求都会转发到根目录下，也就是说 /api 会被 / 替代，这个时候接口路径就变了，少了一层 /api 。而不加斜杠的时候呢？这代表着转发到127.0.0.1:8081的域名下， /api 的路径不会丢失

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • nginx配置中proxy_pass反向代理502的bug记录

    nginx配置中proxy_pass反向代理502的bug记录

    这篇文章主要介绍了nginx配置中proxy_pass反向代理502的bug记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Nginx同一个域名配置多个项目的实现方法

    Nginx同一个域名配置多个项目的实现方法

    这篇文章主要介绍了Nginx同一个域名配置多个项目的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • nginx配置location root简单方法记录

    nginx配置location root简单方法记录

    Location是Nginx中一个非常核心的配置,下面这篇文章主要给大家介绍了关于nginx配置location root的相关资料,文中介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • nginx部署前端post请求405 not allowed问题解决

    nginx部署前端post请求405 not allowed问题解决

    在配置前端项目的时候遇到了一个post请求405 not allowed,简单记录一下如何配置,这篇文章主要给大家介绍了关于nginx部署前端post请求405 not allowed问题解决方法,需要的朋友可以参考下
    2023-09-09
  • Nginx HTTP:413 Request Entity Too Large解决方法

    Nginx HTTP:413 Request Entity Too Large解决方法

    这篇文章主要介绍了Nginx HTTP:413 Request Entity Too Large解决方法,这个问题需要修改PHP配置以及Nginx配置才可以解决,需要的朋友可以参考下
    2015-07-07
  • filebeat收集json格式的tomcat日志详解

    filebeat收集json格式的tomcat日志详解

    这篇文章主要为大家介绍了filebeat收集json格式的tomcat日志详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • nginx作grpc的反向代理踩坑总结

    nginx作grpc的反向代理踩坑总结

    nginx是一款高性能的web服务器，常用于负载均衡和反向代理，本文主要介绍了nginx作grpc的反向代理踩坑总结，感兴趣的可以了解一下
    2021-07-07
  • Linux下yum安装nginx教程

    Linux下yum安装nginx教程

    这篇文章主要介绍了Linux下yum安装nginx教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 在网关中使用Nginx配置HTTP透明代理案例

    在网关中使用Nginx配置HTTP透明代理案例

    这篇文章主要介绍了在网关中使用Nginx配置HTTP透明代理案例,中间还需要iptables配合,需要的朋友可以参考下
    2014-06-06
  • nginx 如何实现读写限流的方法

    nginx 如何实现读写限流的方法

    这篇文章主要介绍了nginx 如何实现读写限流的方法的相关资料,这里提供实例代码及如何配置，需要的朋友可以参考下
    2016-12-12

最新评论