目錄

簡單的解決方法：

添加配置類：

為什么會跨域

1. 什么是源

2. URL結構

3. 同源不同源舉🌰

同源例子

不同源例子

4. 瀏覽器為什么需要同源策略

5. 常規前端請求跨域

---

簡單的解決方法：

添加配置類：

package com.company.usercenter.config;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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173") // 前端地址,可以寫多個，線上地址、開發地址、測試地址.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).allowedHeaders("*");}
}

解決方法寫完了，下面是具體的解釋，請需要看的小伙伴選擇性查收????????

首先解釋下這個配置類：

這個 CorsConfig 配置類是用于解決前后端分離開發中的跨域問題，以下是對代碼的詳細解釋：

1. 注解與類定義 @Configuration：表明這是一個 Spring 配置類，用于定義配置 bean 或引入其他配置。 implements WebMvcConfigurer：實現 Spring 的 WebMvcConfigurer 接口，通過重寫接口方法擴展 Spring MVC 的功能，這里用于配置跨域規則。

2. addCorsMappings 方法 通過 CorsRegistry 對象注冊跨域規則： registry.addMapping("/")： 定義跨域規則的匹配路徑，"/" 表示匹配所有后端接口路徑，即所有接口都應用該跨域規則。 allowedOrigins("http://localhost:5173")： 指定允許訪問后端接口的前端來源（Origin）。這里明確允許 http://localhost:5173（通常是前端開發服務器地址）發起的跨域請求，不能使用 * 搭配 allowCredentials(true)（因為 * 會忽略憑證攜帶）。 allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")： 允許的請求方法，包括常見的 GET（查詢）、POST（提交）、PUT（更新）、DELETE（刪除），以及跨域預檢請求 OPTIONS。 allowCredentials(true)： 允許前端請求攜帶認證憑證（如 Cookie、HTTP 認證等）。開啟后，前端需配合 withCredentials: true（如 Axios 中 myAxios.defaults.withCredentials = true）使用。 allowedHeaders("*")： 允許前端請求攜帶任意請求頭（Header）。若需限制，可改為具體頭名稱（如 "Content-Type", "Authorization"），提升安全性。

3. 整體功能 該配置類為后端接口開啟跨域支持，允許 http://localhost:5173 來源的前端應用，使用多種請求方法、攜帶憑證和任意請求頭訪問后端所有接口，解決前后端分離開發中的跨域問題。實際生產環境中，allowedOrigins 和 allowedHeaders 應根據需求細化，避免過度開放。

為什么會跨域

說到跨域不得不談的就是瀏覽器的同源策略，跨域也是因為瀏覽器這個機制引起的，這個機制的存在還是在于安全。

1. 什么是源

Web內容的源由用于訪問它的URL 的方案(協議)，主機(域名)和端口定義。只有當方案，主機和端口都匹配時，兩個對象具有相同的起源。

同源不同源一句話就可以判斷：就是url中 scheme host port 都相同即為同源。

下面認識下url 結構中的這三個部分。

2. URL結構

URL 代表著是統一資源定位符（Uniform Resource Locator）。URL 無非就是一個給定的獨特資源在 Web 上的地址。

URL有如下結構組成：

• Schme 或者 Protocol

• Domain Name 也叫做host域名

• port 端口號

• Parameters參數

• Anchor 錨點，一般用于定位位置

3. 同源不同源舉🌰

舉一下同源不同源的例子，便于

同源例子

例子	原因
http://example.com/app1/index.html http://example.com/app2/index.html	相同的 scheme http 和host
http://Example.com:80 http://example.com	http 默認80端口所以同源

不同源例子

例子	原因
http://example.com/app1 https://example.com/app2	不同的協議
http://example.com http://myapp.example.com	不同的host
http://example.com http://example.com:8080	不同的端口

4. 瀏覽器為什么需要同源策略

同源策略是一個重要的安全策略，它用于限制一個origin的文檔或者它加載的腳本如何能與另一個源的資源進行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。

5. 常規前端請求跨域

在沒有前后端分離的時候，跨域問題往往是很少的。因為前后端都部署到一起。現在前后端分離不管vue /react 面臨跨域請求的問題。

下面是引用官網描述的一張圖來解釋跨域：

跨源域資源共享（CORS）機制允許 Web 應用服務器進行跨源訪問控制，從而使跨源數據傳輸得以安全進行。現代瀏覽器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 請求所帶來的風險。