一、前言

在 Vue 項目開發(fā)中，我們經(jīng)常會遇到這樣的報錯：

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

這就是典型的 跨域請求被瀏覽器攔截。

雖然生產(chǎn)環(huán)境中通常由后端配置 CORS 或 Nginx 反向代理解決，但在本地開發(fā)階段，前后端往往獨立運行（前端 localhost:8080，后端 localhost:3000），如何優(yōu)雅地繞過跨域限制？

本文將帶你深入理解跨域原理，并提供 Vue CLI（webpack）和 Vite 兩種構(gòu)建工具下的完整解決方案，讓你的開發(fā)流程更順暢。

二、什么是跨域？為什么會出現(xiàn)？

同源策略（Same-Origin Policy）

瀏覽器出于安全考慮，實施了“同源策略”：只有 協(xié)議（protocol）、域名（host）、端口（port） 完全相同，才允許訪問彼此的資源。

瀏覽器會阻止 JavaScript 發(fā)起跨域請求，除非服務端明確允許（CORS）。

三、開發(fā)環(huán)境 vs 生產(chǎn)環(huán)境的區(qū)別

重點：本文聚焦 開發(fā)環(huán)境 的跨域解決！

四、解決方案 1：Vue CLI / webpack-dev-server 代理（推薦）

如果你使用的是 Vue CLI 創(chuàng)建的項目（基于 webpack），可以通過配置 vue.config.js 實現(xiàn)請求代理。

1. 創(chuàng)建vue.config.js

在項目根目錄創(chuàng)建文件 vue.config.js：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服務地址
        changeOrigin: true,               // 修改請求頭中的 origin
        secure: false,                    // 支持 https 目標
        pathRewrite: {
          '^/api': ''                     // 重寫路徑，去掉 /api 前綴
        }
      }
    }
  }
})

2. 前端代碼中發(fā)起請求

// 原本請求：http://localhost:3000/user/login
// 現(xiàn)在只需請求：/api/user/login

axios.post('/api/user/login', { username, password })
  .then(res => console.log(res.data))

3. 工作原理圖解

前端代碼 → http://localhost:8080
           ↓ (瀏覽器)
axios.post('/api/user/login')
           ↓
Vue DevServer 攔截以 /api 開頭的請求
           ↓
轉(zhuǎn)發(fā)到真實后端 → http://localhost:3000/user/login
           ↓
返回響應 → 再由 DevServer 返回給前端

優(yōu)點：

• 前端無需關(guān)心真實后端地址
• 完美繞過瀏覽器跨域限制
• 配置簡單，一行代碼搞定

五、解決方案 2：Vite 項目代理（適用于 Vue 3 + Vite）

如果你使用的是 Vite 構(gòu)建的 Vue 項目（如 create-vue 或 vite create），配置方式略有不同。

1. 修改vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // Vite 中用 rewrite
      }
    }
  }
})

注意：Vite 中使用 rewrite 而不是 pathRewrite。

2. 前端請求方式不變

axios.get('/api/users') // 自動代理到 http://localhost:3000/users

六、進階配置：多接口前綴代理

如果項目需要對接多個后端服務，可以配置多個代理規(guī)則：

// vue.config.js 或 vite.config.js
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: { '^/api': '' }
  },
  '/upload': {
    target: 'http://upload.service.com',
    changeOrigin: true
  },
  '/mock': {
    target: 'https://mockapi.com',
    changeOrigin: true,
    secure: false
  }
}

示例：

• /api/users → http://localhost:3000/users
• /upload/file → http://upload.service.com/file
• /mock/data → https://mockapi.com/mock/data

七、其他方案對比（不推薦用于開發(fā)）

結(jié)論：開發(fā)服務器代理是最佳選擇！

八、常見問題與解決方案

問題 1：代理后接口 404？

原因：pathRewrite 配置錯誤，路徑未正確轉(zhuǎn)發(fā)。

解決：

• 檢查 target 地址是否可達
• 打開瀏覽器 Network，查看實際請求 URL
• 確保 changeOrigin: true

問題 2：WebSocket 也能代理嗎？

可以！Vite 和 webpack 都支持 WebSocket 代理：

proxy: {
  '/ws': {
    target: 'ws://localhost:8080',
    ws: true,
    changeOrigin: true
  }
}

問題 3：代理后 Cookie/Sessions 丟失？

原因：跨域時 Cookie 默認不攜帶。

解決：

前端請求設置 withCredentials: true

axios.defaults.withCredentials = true

后端響應頭需允許：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8080  # 不能為 *

九、生產(chǎn)環(huán)境部署建議

開發(fā)期用代理，上線后怎么辦？

推薦方案：Nginx 反向代理

server {
    listen 80;
    server_name yourdomain.com;

    # 前端靜態(tài)資源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理到后端
    location /api/ {
        proxy_pass http://backend-server:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

這樣前后端共用同一域名，徹底解決跨域問題。

十、總結(jié)

開發(fā)環(huán)境跨域三步走：

• 確定后端接口地址（如 http://localhost:3000）
• 在 vue.config.js 或 vite.config.js 中配置代理
• 前端請求統(tǒng)一加前綴（如 /api）

到此這篇關(guān)于Vue解決開發(fā)環(huán)境Ajax跨域問題的多種方法對比的文章就介紹到這了,更多相關(guān)Vue解決Ajax跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論