一、前言

在 Vue 項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到這樣的報(bào)錯(cuò)：

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.

這就是典型的 跨域請(qǐng)求被瀏覽器攔截。

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

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

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

同源策略（Same-Origin Policy）

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

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

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

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

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

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

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

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

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

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

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

// 原本請(qǐng)求：http://localhost:3000/user/login
// 現(xiàn)在只需請(qǐng)求：/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 開(kāi)頭的請(qǐng)求
           ↓
轉(zhuǎn)發(fā)到真實(shí)后端 → http://localhost:3000/user/login
           ↓
返回響應(yīng) → 再由 DevServer 返回給前端

優(yōu)點(diǎn)：

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

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

如果你使用的是 Vite 構(gòu)建的 Vue 項(xiàng)目（如 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. 前端請(qǐng)求方式不變

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

六、進(jìn)階配置：多接口前綴代理

如果項(xiàng)目需要對(duì)接多個(gè)后端服務(wù)，可以配置多個(gè)代理規(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

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

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

八、常見(jiàn)問(wèn)題與解決方案

問(wèn)題 1：代理后接口 404？

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

解決：

• 檢查 target 地址是否可達(dá)
• 打開(kāi)瀏覽器 Network，查看實(shí)際請(qǐng)求 URL
• 確保 changeOrigin: true

問(wèn)題 2：WebSocket 也能代理嗎？

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

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

問(wèn)題 3：代理后 Cookie/Sessions 丟失？

原因：跨域時(shí) Cookie 默認(rèn)不攜帶。

解決：

前端請(qǐng)求設(shè)置 withCredentials: true

axios.defaults.withCredentials = true

后端響應(yīng)頭需允許：

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

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

開(kāi)發(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;
    }
}

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

十、總結(jié)

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

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

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

最新評(píng)論