解决跨域问题

0、浏览器跨域问题

看到浏览器报 Access-Control-Allow-Origin 毫无疑问了,看来是跨域问题

mark

CORS 是一种访问机制,英文全称是 Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到 Access-Control-Allow-Origin 即可

浏览器端:发送 AJAX 请求前需设置通信对象 XHR 的 withCredentials 属性为 true。

服务器端:设置 Access-Control-Allow-Credentials 为 true。

两个条件缺一不可,否则即使服务器同意发送 Cookie!

Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。(例如 GET/POST)

Access-Control-Allow-Headers 表示跨域请求的头部的允许范围。

Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。

Access-Control-Max-Age 表示预检请求的最大缓存时间。

1、返回新的 CorsFilter

这是一种全局跨域的方式

在任意配置类,返回一个新的 CorsFilter Bean,并添加映射路径和具体的 CORS 配置信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package edu.xpu.cors.config;

@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1. 添加 CORS 配置信息
CorsConfiguration config = new CorsConfiguration();
// 放行哪些原始域
config.addAllowedOrigin ("*");
// 是否发送 Cookie 信息
config.setAllowCredentials (true);
// 放行哪些原始域 (请求方式)
config.addAllowedMethod ("*");
// 放行哪些原始域 (头部信息)
config.addAllowedHeader ("*");
// 暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
config.addExposedHeader ("*");

//2. 添加映射路径
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration ("/**", config);

//3. 返回新的 CorsFilter.
return new CorsFilter(configSource);
}
}

2、重写 WebMvcConfigurer

在任意配置类,返回一个新的 WebMvcConfigurer Bean,并重写其提供的跨域请求处理的接口,目的是添加映射路径和具体的 CORS 配置信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package edu.xpu.cors.config;

@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
// 重写父类提供的跨域请求处理的接口
public void addCorsMappings(CorsRegistry registry) {
// 添加映射路径
registry.addMapping ("/**")
// 放行哪些原始域
.allowedOrigins ("*")
// 是否发送 Cookie 信息
.allowCredentials (true)
// 放行哪些原始域 (请求方式)
.allowedMethods ("GET","POST", "PUT", "DELETE")
// 放行哪些原始域 (头部信息)
.allowedHeaders ("*")
// 暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
.exposedHeaders ("Header1", "Header2");
}
};
}
}