做网站分析/软文营销广告案例

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

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

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

@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport {private static final Logger logger = LoggerFactory.getLogger(WebMvcConfiguration.class);@Overridepublic void configurePathMatch(PathMatchConfigurer configurer) {//setUseSuffixPatternMatch 后缀模式匹配configurer.setUseSuffixPatternMatch(true);//setUseTrailingSlashMatch 自动后缀路径模式匹配configurer.setUseTrailingSlashMatch(true);}@Beanpublic 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*/@Overridepublic 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;}

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