目錄

關于跨域請求出現的原因

同源策略

示例（跨域問題）

如何解決跨域請求

方法一：配置后端服務器以允許跨域請求（后端）

方法二：使用代理服務器（前端）

一 ，使用ajax發送異步請求時 使用api 替代原本訪問后端的端口號

二，在 vite.config.js 文件中 配置跨域

---

關于跨域請求出現的原因

前端地址：http://localhost:5173（Vue 默認端口）

后端地址：http://localhost:8080（常見后端默認端口）

差異點：端口號不同（5173 vs 8080）

結果：瀏覽器認為二者不同源，觸發同源策略限制，導致跨域請求被攔截。

---

同源策略

定義：協議（http/https）、域名（example.com）、端口（:8080）三者完全相同才視為同源。

限制行為：

• 阻止跨域 AJAX/Fetch 請求。
• 限制跨域讀取 DOM（如 <iframe> 內容）。
• 限制 Cookie、LocalStorage 的跨域訪問。

---

示例（跨域問題）

前端使用vue3 框架書寫，啟動前端默認端口號是5173，后端默認端口號是8080，這就會導致客戶端與服務器之間發送請求時因端口號不同產生跨域問題。

根本原因：瀏覽器發現請求的源（5173）與目標（8080）端口不一致，且后端未明確允許跨域訪問。

---

如何解決跨域請求

未解決前：

---

方法一：配置后端服務器以允許跨域請求（后端）

思路：之前報錯是因為不同源（端口號，域名，協議）之間的訪問，在后端服務器配置 CORS（跨域資源共享） 規則，允許來自 http://localhost:5173 的請求跨域訪問后端接口（運行在 8080 端口）。

---

在spring boot項目中添加一個配置類：CorsConfig

package com.it.heima.ssmp.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")// 允許跨域訪問的請求頭.allowedHeaders("*")/// 允許跨域訪問的響應頭.allowCredentials(true);}
}

啟動springboot項目，前端vue項目測試結果

---

方法二：使用代理服務器（前端）

思路：

• 前端運行在 http://localhost:5173（開發服務器端口）。
• 當代碼中發起 /api/xxx 請求時，代理服務器攔截該請求。
• 代理將請求轉發到 http://localhost:8080/api/xxx（后端端口）。
• 瀏覽器感知不到轉發，認為請求仍來自 5173，從而避免跨域錯誤。

---

一 ，使用ajax發送異步請求時 使用api 替代原本訪問后端的端口號

這里的api 表示前端默認端口號5173

// axios.get('http://localhost:8080/user/select')
//使用api替換http://localhost:8080 默認使用前端端口號5173
axios.get('/api/user/select').then(res => {console.log('請求成功')console.log(res.data)userList.value = res.data.data}
).catch(error => {console.log(error)
})

二，在 vite.config.js 文件中 配置跨域

// 配置跨域server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}

啟動springboot項目，前端vue項目測試結果