SpringBoot解决跨域问题

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。

报错如下：

Access to fetch at 'http://localhost:9090/user/page?pageNum=1&pageSize=5' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.      

GET http://localhost:9090/user/page?pageNum=1&pageSize=5 net::ERR_FAILED 200

在 SpringBoot 项目中添加配置文件 /config/CorsConfig.java，前端无需任何其他配置。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

原理

为什么会出现跨域？

出于浏览器同源策略（Sameoriginpolicy）限制。所谓同源（在同一个域）就是两个 url 具有相同的协议（protocol），主机（host）和端口号（port）。

什么是跨域

当交互的两个 url 协议、域名、端口三者之间任意一个不同即为跨域。

为什么浏览器会产生跨域错误

因为浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。同源策略限制两个 URL 同源才可进行交互。

注意，错误是发生在浏览器端的。浏览器正常发请求，服务器正常处理，正常响应，浏览器收到响应后，由于它是跨域的，还会进一步检测本次请求是否安全：检查是否具有一些特殊的响应头。如果不安全，就会报错。

浏览器发现本次请求时跨域的，所以报错。

解决方法

利用 CORS。

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器跨向源服务器，发出XMLHttpRequest 请求。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。

服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头。

优点：浏览器端无需任何改变，就当跨域问题不存在。