Springboot解决跨域问题

Springboot解决跨域问题

跨域问题产生于浏览器的同源策略（Same-Origin Policy）。同源策略是一种安全机制，它限制了一个网页从一个源加载的资源如何与来自另一个源的资源进行交互。同源是指协议、域名和端口号完全相同。

例如，当网页 http://domain1.com/index.html 试图通过 XMLHttpRequest 请求 http://api.domain2.com/data.json 时，由于它们的域名不同（domain1.com 和 domain2.com），浏览器会阻止这种跨域请求。

常见的跨域问题

不同的协议

• 例子： 在一个页面中，从 http:// 发起的请求试图访问 https:// 的资源。
• 原因： 即使是相同的域名，不同的协议也被视为不同的源。因此，http:// 和 https:// 之间的请求也会触发跨域限制。

不同的端口

• 例子： 一个页面通过 http://domain.com:3000 发起请求到 http://domain.com:4000。
• 原因： 即使是相同的域名，不同的端口号也被视为不同的源。跨端口的请求也会被同源策略限制。

子域名不同

• 例子： 一个页面从 sub.domain.com 请求 domain.com 下的资源。
• 原因： 即使是父域相同，子域名不同也被认为是不同的源，因此也会受到同源策略的限制。

文件协议（file://）

• 例子： 一个本地 HTML 文件通过 file:// 协议打开，并尝试请求其他本地文件或远程资源。
• 原因： file:// 协议的页面通常被认为是一个单独的源，与网络上的域不同。

不同的域名后缀

• 例子： 一个页面从 .com 请求 .org 的资源。
• 原因： 浏览器通常将不同的顶级域名（TLD）视为不同的源。

跨域限制主要是由于浏览器的同源策略所导致的安全限制。为了在这些情况下进行跨域请求，需要服务器端配置 CORS 或使用其他跨域解决方案。

代码

为了解决跨域问题，可以使用 CORS（跨域资源共享）。CORS 是一种机制，允许服务器告知浏览器是否允许跨域请求。通过在服务器端设置响应头部信息，允许来自其他源的请求访问资源

在 Spring Boot 中通过创建 CorsConfig 类并实现 WebMvcConfigurer 接口的 addCorsMappings 方法，实际上是配置了跨域资源共享（CORS）的策略。底层原理是通过在 HTTP 头部添加特定的 CORS 相关的响应头来允许跨域请求。

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 映射所有的路径
                .allowedOrigins("*") // 允许所有来源的请求
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的 HTTP 方法
                .allowedHeaders("*") // 允许所有请求头
                .allowCredentials(true) // 允许发送凭证信息（例如，Cookies）
                .maxAge(3600); // 设置预检请求缓存时间（1小时）
    }
}

底层原理

1. 预检请求（Preflight Requests）

当浏览器检测到一个跨域请求（例如，使用 XMLHttpRequest 或 Fetch API 发起的跨域请求），它会首先发起一个预检请求（Preflight Request），以确定实际请求是否安全。

2. 预检请求的处理

预检请求是一个 HTTP OPTIONS 请求，包含了跨域请求所需的头部信息（例如，请求方法、请求头等）。服务器在收到这个预检请求时，会根据配置的 CORS 策略进行处理。

3. CORS 配置

在 Spring Boot 中，通过创建 CorsConfig 类并实现 WebMvcConfigurer 接口的 addCorsMappings 方法，设置了 CORS 相关的配置信息：

• .allowedOriginPatterns("*")：允许所有来源的请求。
• .allowedHeaders(CorsConfiguration.ALL)：允许所有请求头。
• .allowedMethods(CorsConfiguration.ALL)：允许所有请求方法。
• .allowCredentials(true)：允许发送凭证（例如，Cookies）。
• .maxAge(3600)：预检请求的最大缓存时间，避免频繁发起预检请求。

4. 添加 CORS 响应头

当预检请求被服务器接受后，服务器会在实际的响应中添加 CORS 相关的响应头，例如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

5. 浏览器的安全机制

浏览器收到带有 CORS 相关响应头的实际响应后，会根据这些头部信息来判断是否允许跨域请求。如果得到允许，浏览器将处理实际的请求；如果不允许，则浏览器会阻止该跨域请求。

因此，通过配置 Spring Boot 应用的 CORS 策略，实际上是在服务器端告知浏览器，允许特定来源的请求访问资源，并设置允许的请求头、请求方法、是否发送凭证等信息，从而解决跨域问题。这样浏览器在收到响应头后，就会允许相应的跨域请求。