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

一、前言

在使用 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

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

步骤 2:使用 Axios 发起请求

bash 复制代码
// 示例:src/utils/request.js
import axios from 'axios'

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

export default service

步骤 3:调用 API 接口

bash 复制代码
// 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 为例):

bash 复制代码
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

bash 复制代码
npm install cors
javascript 复制代码
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 反向代理 更加稳定,适合上线部署

八、结语

感谢您的阅读!如果你有任何疑问或想要分享的经验,请在评论区留言交流!

相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python