解决nginx已经配置过跨域不生效问题

 更新时间:2023年12月22日 09:03:50   作者:空城旧梦丨  
这篇文章主要介绍了解决nginx已经配置过跨域不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

nginx已经配置过跨域不生效问题

前端访问后台时提示跨域

服务器nginx配置如下

server {    
	listen       80;
	server_name  xxxxxx.com;

	location / {
		proxy_pass http://localhost:8061/;
		proxy_set_header   Host             $host;
		proxy_set_header   X-Real-IP        $remote_addr;
		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	}
	
       add_header Access-Control-Allow-Origin *;
       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,token,platform;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT;
       add_header Access-Control-Allow-Credentials true;
  
       proxy_set_header x-real-ip $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;


	access_log /var/log/nginx/api-access.log;
	error_log  /var/log/nginx/api-error.log;

}

很多文章都是说要加上

add_header Access-Control-Allow-Origin *;

但事实证明我这里已经配置了,还是报跨域,经过查询后发现关键点在这里

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

最终的配置就是

server {    
	listen       80;
	server_name  xxxxxx.com;

	location / {
		proxy_pass http://localhost:8061/;
		proxy_set_header   Host             $host;
		proxy_set_header   X-Real-IP        $remote_addr;
		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	}
	
       add_header Access-Control-Allow-Origin *;
       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,token,platform;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT;
       add_header Access-Control-Allow-Credentials true;
  
       proxy_set_header x-real-ip $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

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

	access_log /var/log/nginx/api-access.log;
	error_log  /var/log/nginx/api-error.log;

}

因为 post 请求 浏览器会发送一个 options 的预检请求,主要将本次的请求头 发送给服务端,若服务端允许,再发送真正的post请求,所以 f12 看到,经常 post 会发送两次请求。

因为后端 java 代码没有对 options 请求做出处理,导致 options 接口请求的时候,报 403 forbidden , 这里 nginx 对 options 的请求直接返回 200,不用到达接口层,直接允许 post 响应头,即可使得上述失效配置能够生效

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 关于Nginx动静分离详解以及配置

    关于Nginx动静分离详解以及配置

    这篇文章主要介绍了关于Nginx动静分离详解以及配置,动静分离是通过中间件将动态请求和静态请求进行分离,分离资源,减少不必要的请求消耗,减少请求延时,需要的朋友可以参考下
    2023-04-04
  • Nginx搭载负载均衡及前端项目部署

    Nginx搭载负载均衡及前端项目部署

    本文介绍了如何使用Nginx实现负载均衡和前端项目部署,通过配置Nginx的负载均衡功能,可以有效地分发客户端请求,提高服务器的处理能力,感兴趣的可以了解一下
    2023-11-11
  • Nginx日志自定义记录以及启用日志缓冲区详解

    Nginx日志自定义记录以及启用日志缓冲区详解

    这篇文章主要给大家介绍了关于Nginx日志自定义记录以及启用日志缓冲区的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Nginx中IF、AND、OR语句用法实例

    Nginx中IF、AND、OR语句用法实例

    这篇文章主要介绍了Nginx中IF、AND、OR语句用法实例,本文讲解的是Ningx中的逻辑判断语句用法,需要的朋友可以参考下
    2015-02-02
  • Nginx-Proxy-Manager可视化管理平台的使用

    Nginx-Proxy-Manager可视化管理平台的使用

    Nginx-Proxy-Manager是一个基Web的Nginx服务器管理工具,它允许用户通过浏览器界面轻松地管理和监控Nginx服务器,本文主要介绍了Nginx-Proxy-Manager可视化管理平台的使用,感兴趣的可以了解一下
    2024-08-08
  • nginx下支持PATH_INFO的方法实例详解

    nginx下支持PATH_INFO的方法实例详解

    这篇文章主要介绍了nginx下支持PATH_INFO的方法,结合实例形式详细分析了nginx下使用PATH_INFO模式的具体方法与相关使用技巧,需要的朋友可以参考下
    2016-02-02
  • 详解Nginx的核心配置模块中对于请求体的接受流程

    详解Nginx的核心配置模块中对于请求体的接受流程

    这篇文章主要介绍了详解Nginx的核心配置模块中对于请求体的接受流程,包括其丢弃请求的过程,需要的朋友可以参考下
    2015-12-12
  • Nginx 的多站点配置方案

    Nginx 的多站点配置方案

    这篇文章主要介绍了Nginx 的多站点配置方案,需要的朋友可以参考下
    2017-07-07
  • Nginx+Tomcat负载均衡及动静分离群集的实现

    Nginx+Tomcat负载均衡及动静分离群集的实现

    本文主要介绍了Nginx+Tomcat负载均衡及动静分离群集的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Nginx实现分端口部署两个或多个项目的教程

    Nginx实现分端口部署两个或多个项目的教程

    这篇文章主要为大家详细介绍了Nginx实现分端口部署两个或多个项目的相关教程,其中包含了反向代理配置,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10

最新评论