CORS跨域问题原因和解决方案

Springboot跨域问题，是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点
- 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境
- 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
- 之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
1
2
3
4

浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略，否则就是跨域的HTTP请求，默认情况下是被禁止的。换句话说，浏览器安全的基石是同源策略。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

报错内容：

什么是CORS？
  CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
  它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。

CORS Header

• Access-Control-Allow-Origin: http://www.xxx.com
• Access-Control-Max-Age：86400
• Access-Control-Allow-Methods：GET, POST, OPTIONS, PUT, DELETE
• Access-Control-Allow-Headers: content-type
• Access-Control-Allow-Credentials: true

含义解释：

解决Springboot的CORS跨域问题

方法一、直接采用SpringBoot的注解@CrossOrigin（也支持SpringMVC）
简单粗暴的方式，Controller层在需要跨域的类或者方法上加上该注解即可

/**
 * Created with IDEA
 *
 * @Author Chensj
 * @Date 2020/5/8 10:28
 * @Description xxxx控制层
 * @Version 1.0
 */
@RestController
@CrossOrigin
@RequestMapping("/situation")
public class SituationController extends PublicUtilController {
 
    @Autowired
    private SituationService situationService;
    // log日志信息
    private static Logger LOGGER = Logger.getLogger(SituationController.class);

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

但每个Controller都得加，太麻烦了，怎么办呢，加在Controller公共父类（PublicUtilController）中，所有Controller继承即可。

/**
 * Created with IDEA
 *
 * @Author Chensj
 * @Date 2020/5/6 10:01
 * @Description
 * @Version 1.0
 */
@CrossOrigin
public class PublicUtilController {
 
    /**
     * 公共分页参数整理接口
     *
     * @param currentPage
     * @param pageSize
     * @return
     */
    public PageInfoUtil proccedPageInfo(String currentPage, String pageSize) {
 
        /* 分页 */
        PageInfoUtil pageInfoUtil = new PageInfoUtil();
        try {
            /*
             * 将字符串转换成整数,有风险, 字符串为a,转换不成整数
             */
            pageInfoUtil.setCurrentPage(Integer.valueOf(currentPage));
            pageInfoUtil.setPageSize(Integer.valueOf(pageSize));
        } catch (NumberFormatException e) {
        }
        return pageInfoUtil;
    }
 
}

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
28
29
30
31
32
33
34
35

当然，这里虽然指SpringBoot，SpringMVC也是同样的，但要求在Spring4.2及以上的版本。另外，如果SpringMVC框架版本不方便修改，也可以通过修改tomcat的web.xml配置文件来处理，请参照另一篇博文（nginx同理）

SpringMVC使用@CrossOrigin使用场景要求
  jdk1.8+
  Spring4.2+

方法二、处理跨域请求的Configuration
  增加一个配置类，CrossOriginConfig.java。继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口，其他都不用管，项目启动时，会自动读取配置。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
/**
 * AJAX请求跨域
 * @author Mr.W
 * @time 2018-08-13
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS).maxAge(3600);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另一种写法

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这种方式是全局配置的，网上也大都是这种解决办法，但是很多都是基于旧的spring版本，比如：
https://blog.csdn.net/tiangongkaiwu152368/article/details/81099169

方法三、采用过滤器（filter）的方式
  同方法二加配置类，增加一个CORSFilter 类，并实现Filter接口即可，其他都不用管，接口调用时，会过滤跨域的拦截。

 @Component
public class CORSFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

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

@Configuration
public class CorsFilterConfig {
    @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);
    }
}
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

方法四、采用nginx做动态代理
使用nginx作为代理，解决跨域问题

1)更改前端ajax访问路径：不直接访问请求接口，而是访问另外一个本域下的接口，例如：http://kuayu.com/getCat

2)修改nginx配置文件：

location /getCat { #添加访问目录为/getCat
            rewrite  ^/getCat/(.*)$ /$1 break;
            proxy_pass   http://csdn.b.com/cat/;
       }
1
2
3
4

方法五、 手动设置响应头(局部跨域)
使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域，这里 Origin的值也可以设置为 “*”,表示全部放行。

@RequestMapping("/index")
public String index(HttpServletResponse response) {
    response.addHeader("Access-Allow-Control-Origin","*");
    return "index";
}
1
2
3
4
5