前情提要:
在 {初探Vue 與 Spring boot 的對話} 專案 ，前端 Vue 應用程式 串接 後端 API 伺服器 ，axios 呼叫 API 時出現以下，”無法取得回應內容 (No 'Access-Control-Allow-Origin' header is present on the requested resource)：” 錯誤訊息。
註: 有關 同源政策限制(Same-Origin Policy) 及 跨來源資源共享(CORS) 簡介 可參看 { 初探 Vue 呼叫 API 出現 CORS 跨來源資源共享 問題原因 } 文章
解決 CORS 問題的兩種主要方法
方式一：修改 API 伺服器配置 (推薦）
標準的解決方案。您需要在運行在 http://localhost:8088 的 後端伺服器 上，配置 HTTP 回應標頭，允許來自 http://localhost:8080 的請求。
Spring Boot (1). 使用 @CrossOrigin 註解 或 (2). 在 Security 配置中新增 Configuration Bean。
這裡使用 @CrossOrigin 註解
例如:
@RestController
@RequestMapping("/api")
// http://localhost:8080 只接受來自來源位址的請求
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping("/users")
public List<User> fetchUsers(){
return userRepository.findAll();
}
}
方式二：使用 Vite 提供的開發代理（開發環境用）
您可以使用 Vite 內建的開發伺服器（http://localhost:8080）提供的 代理 (Proxy) 功能
利用瀏覽器不會阻止「同源」請求的特性。
原理是：
- 您的 Vue 前端呼叫一個相對路徑，例如 /api/users。
- Vue 開發伺服器 (http://localhost:8080) 接收到 /api/users 的請求。
- Vue 伺服器將這個請求**代理（轉發）**到目標後端 API 伺服器 (http://localhost:8088)。
- 由於伺服器之間的通訊不受瀏覽器同源政策限制，後端可以正常回應。
注意!
1.檢查後端伺服器狀態，確保您的 後端 API 伺服器 (http://localhost:8088) 已經啟動並且正常運行。
您可以直接在瀏覽器中輸入 http://localhost:8088/api/users (或後端實際路徑) 來測試 API 是否能夠獨立存取。
2. vite.config.js，修改配置後，您都必須重新啟動前端開發伺服器，配置才會生效
新增 代理 (Proxy) 功能設定
Vite專案透過 vite.config.ts 檔案設定代理，解決開發環境跨域問題。核心配置包括proxy，設定目標位址和路徑重寫規則。
範例:
vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
server: {
proxy: {
// 將所有 /api 開頭的請求代理到 http://localhost:8088
'/api': {
target: 'http://localhost:8088',
changeOrigin: true,
//rewrite: (path) => path.replace(/^\/api/, '') // 實際發送給後端時，可能需要移除 /api 前綴，以我的範例要移除
}
}
}
})
總結相關修改:
修改您的 Axios 請求:
修改前端的 API 呼叫，將完整的後端 URL 替換為代理路徑：
原請求： axios.get('http://localhost:8088/api/users')
修改後： axios.get('/api/users')
重新啟動您的 Vite 開發伺服器，這個請求就會透過代理繞過 CORS 限制。
打開瀏覽器，http://localhost:8080/ 測試，成功。
注意! 如果出現，這個錯誤訊息 GET http://localhost:8080/api/users 404 (Not Found) 表示您的 前端 Vue 應用程式 已經成功發出了請求，但 接收請求的伺服器 找不到對應的資源（404 Not Found）
錯誤可能原因
http://localhost:8080 是您 Vue 前端應用程式的開發伺服器 位址。
當您發出請求 axios.get('/api/users') 時，請求會發生兩種情況之一：
1. 如果配置了代理（Proxy）: 您的 Vue 開發伺服器 (8080) 收到請求，但它未能成功將請求轉發 (Proxy) 到目標後端 (8088)，或者轉發的路徑不對。
2. 如果沒有配置代理: Vue 開發伺服器 (8080) 嘗試在自己的檔案系統中尋找一個名為 /api/users 的靜態檔案，肯定會找不到。
解決步驟
根據您使用的前端開發工具 Vite 檢查以下步驟：
1. 檢查代理配置是否正確
確認您是否正確配置了 vite.config.js。 特別是 目標伺服器 和 路徑重寫 正確。
關鍵說明: 檢查您的後端 API 伺服器(8088) 接受的路徑是 /api/users 還是 /users？
1.如果後端接受路徑是 /users，則 rewrite，移除 /api 前綴這行是必要的。
2.如果後端接受路徑是 /api/users，請移除 rewrite 這行。
以我們的例子來講，後端 Spring boot API 路徑 /api/users，則不需要 rewrite。
SpringBoot-Backend
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping("/users")
public List<User> fetchUsers(){
return userRepository.findAll();
}
}
[Vue-Frontend]
UserServce.ts
import axios from 'axios'; //引入 Axios 庫
class UserService {
getUsers() {
return axios.get('/api/users'); //發送 GET 請求以獲取用戶列表
}
}
export default new UserService();
vite.config.js
修正後
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig(({ mode }) => {
return {
plugins: [vue(), vueDevTools()],
server: {
proxy: {
'/api': {
target: http://localhost:8088, // 確保 您的後端伺服器位址
changeOrigin: true,
//rewrite: (path) => path.replace(/^\/api/, '') // 刪除 移除 /api 前綴
}
}
}
}
})
2. 確認代理配置後是否重啟伺服器
vite.config.js，修改配置後，您都必須重新啟動前端開發伺服器 npm run dev，配置才會生效
3. 檢查後端伺服器狀態
確保您的 後端 API 伺服器 (http://localhost:8088) 已經啟動並且正常運行。
您可以直接在瀏覽器中輸入 http://localhost:8088/api/users (或後端實際路徑) 來測試 API 是否能夠獨立存取。
4. 檢查前端 Axios 請求是否使用相對路徑
確認您的 Vue 代碼中使用的是相對路徑：
axios.get('/api/users') // 正確使用代理路徑
總結:
404 Not Found 錯誤最可能的原因是:
1.Proxy 配置錯誤或未生效 (忘記重啟前端伺服器)。
2.Proxy 成功轉發，但轉發到的路徑與後端 API 實際定義的路徑不匹配 (例如，rewrite 的問題)。
3.後端 API 伺服器(8088)根本沒有啟動，或該路徑在後端本身就不存在。
留言