Vue解决开发环境 Ajax 跨域问题

news2025/6/8 21:38:24

一、前言

在使用 Vue 进行前后端分离开发时，前端通常运行在本地开发服务器（如 http://localhost:8080），而后端接口可能部署在其他域名或端口下（如 http://api.example.com:3000）。这时就可能出现 跨域（Cross-Origin）请求被浏览器拦截 的问题。

本文将带你深入了解：

什么是跨域？为什么会发生？
Vue CLI 中的代理机制（Proxy）是如何工作的？
如何配置 vue.config.js 实现开发环境下的跨域代理？
使用 Axios 请求时的注意事项
生产环境的跨域解决方案建议
常见错误及排查方法

二、什么是跨域？为什么会出现？

✅ 同源策略（Same-origin Policy）

浏览器出于安全考虑，默认不允许一个网页向另一个不同源（协议、域名、端口任意一项不同）发起请求。这就是所谓的 同源策略。

例如：

地址 A	地址 B	是否跨域
http://a.com:8080	http://a.com:8080	否
http://a.com:8080	http://a.com:3000	是（端口不同）
http://a.com:8080	https://a.com:8080	是（协议不同）
http://a.com:8080	http://b.com:8080	是（域名不同）

✅ 浏览器报错示例

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

三、开发环境中解决跨域的推荐方式：代理（Proxy）

在 Vue CLI 创建的项目中，我们可以通过配置 代理服务器（Proxy） 来绕过浏览器的同源策略限制。

📌 原理：前端请求本地路径（如 /api/xxx），Vue DevServer 自动将该请求转发到真实后端地址（如 http://api.example.com/api/xxx），从而避免了跨域问题。

四、如何配置代理（Vue CLI 项目）

步骤 1：创建 `vue.config.js`

在项目根目录下创建文件 vue.config.js：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 后端接口地址
        changeOrigin: true,              // 是否允许跨域
        pathRewrite: {
          '^/api': ''                    // 重写路径，去掉 /api 前缀
        }
      }
    }
  }
}

步骤 2：使用 Axios 发起请求

// 示例：src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: '/api', // 所有请求都将以 /api 开头
  timeout: 5000
})

export default service

步骤 3：调用 API 接口

// src/views/HomeView.vue
import request from '@/utils/request'

export default {
  mounted() {
    request.get('/users').then(res => {
      console.log('用户列表:', res.data)
    }).catch(err => {
      console.error('请求失败:', err)
    })
  }
}

📌 效果说明：

你在前端请求 /api/users
实际请求被 Vue DevServer 代理到 http://api.example.com/api/users
浏览器看到的是请求本地服务器，不存在跨域问题

五、生产环境如何处理跨域？

开发环境通过代理解决了跨域问题，但 生产环境不能依赖代理机制，需要后端配合设置响应头来支持跨域。

后端需添加的响应头（以 Node.js Express 为例）：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*') // 允许所有来源访问
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  next()
})

📌 或者使用中间件如 cors：

npm install cors

const cors = require('cors')
app.use(cors())

六、常见错误与排查方法

错误现象	可能原因	解决方案
请求未走代理	请求路径未匹配 `/api`	检查请求路径和代理配置
404 Not Found	后端接口路径不对	检查 pathRewrite 配置
端口冲突	devServer 端口被占用	修改 port 属性
代理未生效	vue.config.js 语法错误	检查 JS 语法是否正确
无法访问目标服务器	target 地址不可达	检查网络连接或目标服务状态

七、其他方式解决跨域（不推荐用于正式项目）

方式	说明
JSONP	仅支持 GET 请求，已逐渐淘汰
CORS 插件（如 Allow CORS）	临时调试可用，不适合正式开发
后端开启 CORS	推荐做法，适用于生产环境
使用 Nginx 反向代理	更加稳定，适合上线部署