网站前端设计牛商网做网站多少钱
跨域问题太常见了，这里不做详细赘述。文章主要想说一下，如何统一管理和更好的来管理 跨域配置
跨域的常见配置有两种 后台代码设置和网关设置
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;}以上就是基本优化思路，简单实用 ~