nginx优雅如何优雅的接管【跨域配置】

跨域问题太常见了，这里不做详细赘述。文章主要想说一下，如何统一管理和更好的来管理  跨域配置

跨域的常见配置有两种 后台代码设置和网关设置

1、后台代码设置  以springboot为例代码如下（水一下文章长度...）

@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport {
    private static final Logger logger = LoggerFactory.getLogger(WebMvcConfiguration.class);

    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        //setUseSuffixPatternMatch 后缀模式匹配
        configurer.setUseSuffixPatternMatch(true);
        //setUseTrailingSlashMatch 自动后缀路径模式匹配
        configurer.setUseTrailingSlashMatch(true);
    }

    @Bean
    public CorsFilter corsFilter() {
        logger.info("---------------corsFilter--------------------");
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }


    /**
     * 设置跨域访问
     *
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        logger.info("---------------WebMvcConfigurer--------------------");
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowCredentials(true);
    }




}

2、网关设置-以nginx配置为例

add_header 'Access-Control-Allow-Origin' "*";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' '*';

栗子举完了，这里说下如有优雅起来 ~

以上代码现有问题：

1、跨域处理全部都开放的话，会有资源安全问题，很有可能会被盗用

2、管理项目比较多的话，如果代码设置了跨域处理。nginx又add_header一下会有报错的

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://xxx.xxx.xx, *’, but only one is allowed.

已被CORS策略阻止：对预请求的响应未通过访问控制检查：“access control Allow Origin”标头包含多个值’‘http://xxx.xxx.xx,，*'，但只允许使用一个。（这个属性不能有多个、也不能为空）

现在说一下目前认为比较合理的方案，用nginx全面接管跨域设置，覆盖代码跨域设定。添加origin域名校验

覆盖跨域处理，这里推荐用 “proxy_hide_header ”，也就是先隐藏 再添加，这样就不会出现多条header属性的问题了(也可以用more_set_headers模块来处理，但是完全没必要引入新module...)

nginx跨域代码如下

     #隐藏后端服务响应中的 Access-Control-Allow-Origin 标头
     proxy_hide_header 'Access-Control-Allow-Origin';
     proxy_hide_header 'Access-Control-Allow-Credentials';
     proxy_hide_header 'Access-Control-Allow-Methods';
     proxy_hide_header 'Access-Control-Allow-Headers';


    #通过$http_origin来判断域名是否允许访问
    set $cors "";
    if ($http_origin ~* '(test.com|test.cn)'){
        set $cors "true";
    }

    if ($cors = 'true'){
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' '*';
    }

这个思路应该是比较适用大多数的处理，那就按这个思路 让配置更优雅一些 ~

将上述代码放入到cors.txt中

nginx配置中，哪里需要跨域处理就 include一下就可以。这样也可以统一管理安全域名

  location /test {
    #引入跨域设置
     include /usr/local/nginx/conf/vhost/cors.txt;
     proxy_pass http://172.16.x.xx:8080;
  }

以上就是基本优化思路，简单实用 ~