跨域(CORS)是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。
跨域问题(CORS PROBLEM)是浏览器同源策略导致访问失败的问题。
1.跨域产生的场景
1)不同协议(http/https)
2)不同IP
3)不同端口
2.前端解决方案
1)jsonp
2)nodeJs服务器代理
3.后端解决方案
1)nginx反向代理解决跨域
2)服务端设置Response Header(响应头部)的Access-Control-Allow-Origin
3)在需要跨域访问的类和方法中设置允许跨域访问(如Spring中使用@CrossOrigin注解);
4)继承使用Spring Web的CorsFilter(适用于Spring MVC、Spring Boot)
5)实现WebMvcConfigurer接口(适用于Spring Boot)
4.后端解决示例
4.1 过滤器
@WebFilter
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(req, res);
}
}
4.2 拦截器
@Component
public class CrossInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
return true;
}
}
4.3 实现 WebMvcConfigurer
@Configuration
@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 拦截所有的请求
.allowedOrigins("http://www.xxx.com") // 可跨域的域名,可以为 *
.allowCredentials(true)
.allowedMethods("*") // 允许跨域的方法,可以单独配置
.allowedHeaders("*"); // 允许跨域的请求头,可以单独配置
}
}
4.4 使用Nginx配置
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
if ($request_method = 'OPTIONS') {
return 204;
}
}
4.5 使用@CrossOrgin注解
@CrossOrigin //在Controller使用
@RestController
@RequestMapping("/test")
public class TestController {
@GetMapping("/test1")
public String test1() {
return "test1";
}
@CrossOrigin // 在具体接口上使用
@GetMapping("/test2")
public String test2() {
return "test2";
}
}
4.6 Spring Cloud Gateway
spring:
cloud:
gateway:
globalcors:
cors-configurations:
'[/**]':
allow-credentials: true
allowed-origins:
- "http://xb.abc.com"
- "http://sf.xx.com"
allowed-headers: "*"
allowed-methods:
- OPTIONS
- GET
- POST
- DELETE
- PUT
- PATCH
max-age: 3600