跨域问题是什么:
指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.
什么时候不会触发CORS跨域请求:
“简单请求"不会触发CORS预检请求. 简单请求包括"GET” “HEAD” “POST”
并且还要满足 Content-Type 的值仅限于三种情况:
text/plain , multipart/form-data , application/x-www-form-urlencoded
非简单请求会先发送预检请求 是OPTIONS方法的请求
例如PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
同源策略: 是指 协议,域名,端口都要相同,其中有一个不同都会产生跨域问题.
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js | 同一域名下 | 允许 |
http://www.a.com/ab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://192.168.0.1/b.js | 域名和域名对应的ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名,不同二级域名 | 不允许 |
http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
如何解决跨域?
方法一:
使用nginx部署为同一域
例如
静态请求: 访问http://nginx/xxx 去前端
动态请求: 访问http://nginx/api/xxx 去网关
方法二:
配置服务器响应跨域请求
需要添加响应头
- Access-Control-Allow-Origin: 支持哪些来源的请求跨域
- Access-Control-Allow-Methods: 支持哪些方法跨域
- Access-Control-Allow-Credentials: 跨域请求默认不包含cookie, 设置为true可以包含cookie
- Access-Control-Expose-Headers: 跨域请求暴露的字段
- Access-Control-Max-age: 响应有效时间多少秒
不能每个方法都添加响应头, 所以用filter 在网关服务中统一配置跨域
以下配置就是全放行, 都可以跨域.
@Configuration
public class MyCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//1. 配置跨域
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOriginPattern("*");
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsWebFilter(source);
}
}
注意引包的时候引入reactive包下的:
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;