跨域、跨域问题

跨域(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