-
老生常谈之跨域
1.什么是跨域问题:
因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下,不能读写另一个域的资源。而在实际开发中,前后端常常是相互分离的,并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据,就必须发起请求,如果不做一些处理,就会受到浏览器同源策略的约束。后端可以收到请求并返回数据,但是前端无法收到数据。
同源怎么理解:如果两个页面的协议、域名和端口都相同,则两个页面具有相同的源。
2.非同源没有处理跨域会有哪些限制
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求无法使用,不能读取响应结果。
3.两种跨域请求
* 请求方式:HEAD,GET,POST
* 请求头信息:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain
同时满足上述请求方式和请求头信息属于简单请求,其他都是非简单请求。值得一提的是,非简单请求,在正式请求之前会增加一次OPTIONS请求,称为预检请求。
4.CORS字段梳理
(1)Access-Control-Allow-Origin
表示允许资源共享的域名,可以设置为*允许全部域名,此时无法使用cookie
String curOrigin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
(2)Access-Control-Expose-Headers
CORS请求时,XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers
里面指定
response.addHeader("Access-Control-Expose-Headers", "sysid");
(3)Access-Control-Allow-Credentials
用来指定浏览器请求服务端时是否可以携带身份凭证,比如常用的cookie,设置为false时无法使用cookie
response.addHeader("Access-Control-Allow-Credentials", "true");
(4)Access-Control-Allow-Methods
表示允许的浏览器请求方法类型
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, PUT");
(5)Access-Control-Allow-Headers
用于预检请求中,列出将在正式请求中支持的头部信息字段
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, Token,sysid");
(6)Access-Control-Max-Age
表示本次预检请求的有效时间,单位为秒,失效前不需要重新预检
response.addHeader("Access-Control-Max-Age", "3600");
-
CORS方案
1.java后端处理方案:http响应体设置Access-Control-Allow-Origin,具体实现的方案可以有很多种。
(1) 在过滤器中设置httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
@Component
@WebFilter(urlPatterns = "/*", filterName = "originFilter")
public class OriginFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
// 指定允许其他域名访问
String curOrigin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Expose-Headers", "sysid");
if ("OPTIONS".equals(request.getMethod())) {//判断预检请求
response.setStatus(HttpStatus.OK.value());//返回一个200状态吗,标示允许跨域
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, PUT");//当判定为预检请求后,设定允许请求的方法
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, Token,sysid"); //当判定为预检请求后,设定允许请求的头部类型
response.addHeader("Access-Control-Max-Age", "3600");
}
filterChain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
(2)springboot全局处理跨域方案本质与方案(1)相同,区别在于基于框架具体实现方式不同。
@Configuration
@EnableWebMvc
public class GlobalCorsConfig implements WebMvcConfigurer {
//
@Override
public void addCorsMappings(CorsRegistry registry) {
//设置允许跨域的路径
registry.addMapping("/**")
//设置允许跨域请求的域名
.allowedOrigins("*")
//是否允许证书 不再默认开启
.allowCredentials(true)
//设置允许的方法
.allowedMethods("*")
//跨域允许时间
.maxAge(3600);
}
}
或
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
@Bean
public CorsFilter 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);
}
}
(3)springboot局部处理方案
@CrossOrigin(origins = "*")
@RestController
@RequestMapping("/test")
public class TestController {
}
2.tomcat处理方案:执行过滤器
(1)首先在tomcat/lib文件夹中添加cors-filter-2.4.jar、java-property-utils-1.9.1.jar两个jar包。
(2)在tomcat/conf/web.xml中增加过滤器配置
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
-
验证CORS(跨域资源共享)
根据对同源的理解,我们可以在本地启动两个端口不同的应用,在一个应用的console中执行以下代码。
var jq = document.createElement('script');
jq.src = "https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$.ajax({
type: "GET",
url: "http://localhost:8001/demo/test/cors",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
测试通过的效果:
测试未通过的效果:
当然,失败的原因有很多,报错的内容也不尽相同,这里只是展示最常见的一种。
tomcat跨域问题解决:https://www.cnblogs.com/zhaoyanhaoBlog/p/9370830.html