只有前端才會有跨域問題后端不受限制

一、什么是“同源策略”（Same-Origin Policy）

? 定義：

瀏覽器的 同源策略 是一種 安全機制，限制一個源的 JavaScript 訪問另一個源的資源，以防止惡意網站竊取用戶敏感信息。

? “同源” 的判斷標準（協議 + 域名 + 端口）必須都相同：

條件	是否同源
http://a.com 與 http://a.com	? 是同源
http://a.com 與 https://a.com	? 協議不同
http://a.com 與 http://b.com	? 域名不同
http://a.com:8080 與 http://a.com:8081	? 端口不同

---

二、什么是“跨域”

跨域（Cross-Origin） 指的是前端 JavaScript 在瀏覽器中訪問“非同源”的接口資源。

舉例：

假設你的前端頁面地址是：

http://localhost:8080

而你訪問的后端接口是：

http://localhost:8081/api/user

因為 端口不同，所以就是跨域請求，瀏覽器就會限制 JS 獲取響應內容。

---

三、同源策略限制什么？

操作類型	是否受同源策略限制
<img src=""> 加載圖片	? 不受限制（可跨域）
<link> 加載 CSS	? 不受限制（可跨域）
<script> 加載 JS	? 不受限制（可跨域）
AJAX（XHR、fetch）請求接口	? 受限制（必須同源）
頁面間的 Cookie 共享	? 受限制（必須同源）
iframe 操作其它頁面 DOM	? 受限制（必須同源）

---

四、為什么存在同源策略？

為了解決以下安全問題：

• 防止 A 網站通過 JS 惡意讀取 B 網站的用戶信息（如 Cookie、localStorage、接口返回數據）

• 避免 CSRF 攻擊等跨站請求攻擊

• 瀏覽器不限制，用戶信息可能被任意網站竊取

---

五、跨域請求報錯長這樣

Access to XMLHttpRequest at 'http://localhost:8081/api/user' 
from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

六、跨域的常見解決方案

? 方式一：服務端配置 CORS（推薦方式）

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是瀏覽器與服務端約定的 跨域資源共享協議。

不允許不是瀏覽器的一種安全限制么？為啥要后端配置允許跨域（CORS）？

🌐 瀏覽器的跨域請求是否被允許，是瀏覽器根據后端響應頭是否包含 CORS 信息來決定的！

換句話說：

• 不是瀏覽器自己說了算。

• 是瀏覽器問后端：“你同不同意這個域名訪問你？”

• 如果后端沒明確說“我允許”，那瀏覽器就攔截響應，不讓 JS 拿到。

原理：

• 瀏覽器在跨域請求時，會自動帶上 Origin 請求頭

• 服務端需要在響應頭中明確允許的來源：

Access-Control-Allow-Origin: http://localhost:8080

• 瀏覽器收到后，才會允許 JavaScript 讀取響應

Spring Boot 中配置 CORS：

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允許所有路徑.allowedOrigins("http://localhost:8080") // 允許訪問的域.allowedMethods("GET", "POST", "PUT", "DELETE").allowCredentials(true); // 允許攜帶 Cookie}
}

---

? 方式二：前端開發時使用代理（只適合開發環境）

• Vue/React 項目中，前端配置 devServer.proxy，把請求“偽裝”轉發到后端

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8081',changeOrigin: true}}}
}

---

? 方式三：JSONP（只能用 GET，已淘汰）

• 原理：利用 <script src=""> 不受同源策略限制，將數據包成 JS 函數調用

• 只能解決 GET 請求

• 安全性差，功能弱，幾乎淘汰

---

七、注意：跨域問題是瀏覽器行為，服務端或后端代碼無此限制

場景	是否受同源策略限制
瀏覽器 + JS + Ajax	? 限制
后端發 Http 請求	? 不限制
Postman 發請求	? 不限制
curl 命令	? 不限制

---

八、CORS 的核心意義總結一句話：

🌐 同源策略是瀏覽器為安全設定的限制機制，CORS 是服務端響應中聲明“我允許誰來訪問我”的機制。

如果服務端不顯式聲明允許，瀏覽器就自動屏蔽響應結果。

---

九、Vue + SpringBoot 是否跨域？

是跨域的，典型表現：

Vue 地址	Spring Boot 地址	是否跨域
http://localhost:8080	http://localhost:8081	? 是
http://localhost:8080	http://localhost:8080	? 否
http://frontend.example.com	http://api.example.com	? 是