解决的跨域--双重head头（开发环境和部署到测试环境都做了跨域从而产生双重header头）

甜甜掉在星星上

已于 2023-02-21 20:09:34 修改

阅读量1.1k

点赞数

分类专栏： java 运维文章标签： java nginx

于 2020-11-30 11:52:43 首次发布

本文链接：https://blog.csdn.net/weixin_45528650/article/details/110383274

版权

java 同时被 2 个专栏收录

48 篇文章 4 订阅

订阅专栏

运维

4 篇文章 1 订阅

订阅专栏

这篇博客介绍了在前后端分离的开发中遇到的跨域问题及其解决方案。当在Spring Boot应用中设置跨域过滤器，并在Nginx服务器上也配置了跨域相关header时，会导致前端收到双重header，从而引发问题。作者提供了两种解决办法：一是删除Nginx的header配置，二是通过@Profile注解限制Spring Boot的跨域配置仅在开发环境生效。这两种方法都能有效避免跨域问题的出现。

摘要由CSDN通过智能技术生成

跨域是前后端分离必须要解决的问题
当我们在开发环境加上一段代码解决跨域问题

/**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.setAllowCredentials(true);
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return new CorsFilter(source);
    }

但是当我们部署到nginx上也加上了一段跨界解决代码加上header头

location /m/admin/{
		set $origin '*';
	    	if ($http_origin) {
	       set $origin "$http_origin";
	    	}
	    	add_header 'Access-Control-Allow-Origin' $origin always;
	    	add_header 'Access-Control-Allow-Credentials' 'true';
	    	add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
	    	add_header 'Access-Control-Allow-Headers' '*'; 
	    	if ($request_method = 'OPTIONS') {
	            return 204;
	    	}
	 	client_max_body_size 30m; 
	 	proxy_pass   http://mallAdmin/;
	 	proxy_set_header    X-Real-IP        $remote_addr;
	 	proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
    	}

那么我们前端工程师在连接部署到的环境开始调试的时候就会出现双重header头

在这里插入图片描述

解决方式一：去掉nginx的header头

location /m/admin/{
		set $origin '*';
	    	if ($http_origin) {
	       set $origin "$http_origin";
	    	}
	    	if ($request_method = 'OPTIONS') {
	            return 204;
	    	}
	 	client_max_body_size 30m; 
	 	proxy_pass   http://mallAdmin/;
	 	proxy_set_header    X-Real-IP        $remote_addr;
	 	proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
    	}

解决方式二：加上注解@Profile(“dev”)标识这只是在开发环境中使用，或者注释掉这段代码在部署到测试环境去

 /**
     * 允许跨域调用的过滤器
     */
    @Bean
    @Profile("dev")
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.setAllowCredentials(true);
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return new CorsFilter(source);
    }