脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 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安装后常用功能配置基础篇

    Nginx安装后常用功能配置基础篇

    这篇文章主要介绍了Nginx安装后常用的功能配置，为了在使用中更高效简洁，Nginx安装后通常会进行一些常用的配置，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2022-03-03
  • 让VIM支持Nginx .conf文件语法高亮显示功能的方法

    让VIM支持Nginx .conf文件语法高亮显示功能的方法

    这篇文章主要给大家介绍了关于让VIM支持Nginx .conf文件语法高亮显示功能的方法，文中分别介绍了手动修改和自动化脚本两种方法的实现，都给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • 深入理解Nginx之error_page模块的使用

    深入理解Nginx之error_page模块的使用

    error_page是nginx一个重要的指令,作用是定制化服务器错误页面,本文主要介绍了Nginx之error_page模块的使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • Nginx中Map模块的具体使用

    Nginx中Map模块的具体使用

    Nginx的map模块是一个功能强大的工具,可以在配置Nginx时实现更高效的请求处理,本文主要介绍了Nginx中Map模块的具体使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • nginx访问日志并删除指定天数前的日志记录配置方法

    nginx访问日志并删除指定天数前的日志记录配置方法

    这篇文章主要介绍了nginx访问日志并删除指定天数前的日志记录配置方法,需要的朋友可以参考下
    2014-03-03
  • nginx使用内置模块配置限速限流的方法实例

    nginx使用内置模块配置限速限流的方法实例

    Nginx现在已经是最火的负载均衡之一,在流量陡增的互联网面前,接口限流也是很有必要的，尤其是针对高并发的场景,下面这篇文章主要给大家介绍了关于nginx使用内置模块配置限速限流的相关资料,需要的朋友可以参考下
    2022-05-05
  • 详解nginx basic auth配置踩坑记

    详解nginx basic auth配置踩坑记

    本篇文章主要介绍了详解nginx basic auth配置踩坑记，nginx的basic auth配置由ngx_http_auth_basic_module模块提供，对HTTP Basic Authentication协议进行了支持，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • nginx php-fpm中启用慢日志配置（用于检测执行较慢的PHP脚本）

    nginx php-fpm中启用慢日志配置（用于检测执行较慢的PHP脚本）

    这篇文章主要介绍了nginx php-fpm中启用慢日志配置,php-fpm慢日志slowlog设置可以让我们很好的看见哪些php进程速度太慢而导致的网站问题,可以让我们方便的找到问题的所在,需要的朋友可以参考下
    2014-05-05
  • 基于nginx反向代理获取用户真实Ip地址详解

    基于nginx反向代理获取用户真实Ip地址详解

    我们访问互联网上的服务时,大多数时客户端并不是直接访问到服务端的,而是客户端首先请求到反向代理,反向代理再转发到服务端实现服务访问,这篇文章主要给大家介绍了关于如何基于nginx反向代理获取用户真实Ip地址的相关资料,需要的朋友可以参考下
    2022-03-03
  • nginx部署.net core站点的方法

    nginx部署.net core站点的方法

    这篇文章主要介绍了nginx部署.net core站点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论