nginx配置解决跨域问题

之前写实验室官网连调阶段出现了跨域问题，一开始我是写了一个拦截器来解决问题，但是在个别接口仍然会出现问题，然后使用@CrossOrigin来解决，但是@CrossOigin注解默认是不支持put和delete方法的，我在网上查询了cors的细粒度配置，尝试了能查到的所有方法失败，最后还是采用了filter加nginx配置的方式来解决问题

出现跨域问题时，一般是 PUT，DELETED 两种请求，当浏览器请求时，会发送两个请求到 nginx。
其中一个请求类型为 options,一个请求为 PUT 或者 DELETED。
nginx 需要对 options 请求进行拦截，返回 200,并添加响应的头。

1.AllowOriginFilter代码

public class AllowOriginFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;String origin = request.getHeader("Origin");if (StringUtils.isNotBlank(origin)) {//设置响应头，允许跨域访问//带cookie请求时，必须为全匹配，不能使用*/*** 表示允许 origin 发起跨域请求。*/response.addHeader("Access-Control-Allow-Origin", origin);}/*** GET,POST,OPTIONS，PUT,DELETE 表示允许跨域请求的方法*/response.addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE, HEAD, PATCH");/*** 表示在86400秒内不需要再发送预校验请求*/response.addHeader("Access-Control-Max-Age", "86400");//支持所有自定义头String headers = request.getHeader("Access-Control-Request-Headers");if (StringUtils.isNotBlank(headers)) {//允许JSON请求，并进行预检命令缓存response.addHeader("Access-Control-Allow-Headers", headers);}response.addHeader("Access-Control-Max-Age", "3600");//允许cookieresponse.addHeader("Access-Control-Allow-Credentials", "true");/*** 设置content-type*/
//         response.addHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");filterChain.doFilter(servletRequest, response);}@Overridepublic void destroy() {}
}

2.注入

@Configuration
@EnableWebMvc
@ComponentScan("这里填自己的项目")
public class WebConfiguration extends WebMvcConfigurerAdapter {/*** 解决DELETE、PUT参数获取不到** @return*/@Beanpublic FormContentFilter formContentFilter() {return new FormContentFilter();}/*** 注入RestTemplate** @return*/@Beanpublic RestTemplate getRestTemplate() {return new RestTemplate();}/*** 跨域Fileter注入** @return 跨域注册Bean对象*/@Beanpublic FilterRegistrationBean registerFilter() {FilterRegistrationBean bean = new FilterRegistrationBean();bean.addUrlPatterns("/*");bean.setFilter(new AllowOriginFilter());return bean;}
}

3.nginx配置

http {server{listen 80;
#server_name 你的域名;
#location / {#try_files $uri $uri/ =404;proxy_pass http://localhost:8080;# proxy_cookie_path /api/ /;proxy_cookie_path /weily /;proxy_set_header Host $host:80;proxy_set_header Referer $http_referer;proxy_set_header Cookie $http_cookie;proxy_set_header X-Real-Ip $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Content-Type $content_type;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Headers content-type;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;return 200;}client_max_body_size 1024m;}}
}

nginx配置解决跨域问题相关推荐

nginx 代理解决跨域问题
前言可能在某些时候我们的前端项目需要访问一些外部的接口,比如Apollo等,而直接使用axios发送请求的话,会报跨域的错误,具体什么是跨域这里就不啰嗦了,如下图. 这个接口地址当然是正确的,可以放 ...
Nginx配置cros跨域以及遇到401响应的问题
nginx配置cros跨域以及遇到401.500响应的问题这是我Nginx的server配置: server {listen 80;server_name DataAnalysis;location ...
JAVA商城项目（微服务框架）——第7天nginx+cors解决跨域+品牌+分类查询
0.学习目标使用资料搭建后台系统会使用nginx进行反向代理实现商品分类查询功能掌握cors解决跨域实现品牌查询功能 1.搭建后台管理前端 1.1.导入已有资源后台项目相对复杂,我们不再从 ...
Nginx 轻松解决跨域问题
当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. # 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://loc ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...
vue服务器代理proxyTable配置解决跨域
目录 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路代理原理总结 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求( ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
ng配置解决跨域请求
问题概述前端h5请求后端服务,两者的域名不同,报出这样的错误 No 'Access-Control-Allow-Origin' header is present on the requested ...
nginx配置图片跨域访问
在server段中添加红框内的图片跨域内容参数 location ~* .*.(gif|jpg|jpeg|png|bmp|swf)$ { add_header Access-Control-Allo ...
前后分离，测试环境使用nginx调试解决跨域问题。

nginx配置解决跨域问题

1.AllowOriginFilter代码

2.注入

3.nginx配置

nginx配置解决跨域问题相关推荐

最新文章

热门文章