Vue使用代理方式解决跨域问题

1、解决跨域问题

如果 Vue 前端应用请求后端 API 服务器,出现跨域问题(CORS),如下图:

**解决方法:**在 Vue 项目中,打开 vue.config.js 配置文件,在配置文件中使用代理解决跨域问题。

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: 'http://localhost:8085',  //使用代理,解决跨域问题
  }
})

**注意:**配置代理完成后,请求的URL前面不需要再加上完整的域名了,示例如下:

javascript 复制代码
function getUserInfo(userId) {
    //使用 axios 的 GET 请求
    axios({
        method: 'GET',
        //注意:因为配置了代理服务器(解决跨域问题),所以请求的URL前面不需要再加上完整的域名
        //url: `http://localhost:8085/user/getUserInfo/${userId}` //错误
        url: `/user/getUserInfo/${userId}` //正确
    }).then(
        function (response) {
            userInfo.value = response.data;
        }
    ).catch(function (error) {
        alert("发生异常:" + error.message);
    });
}

最后重新启动项目就可以了。

2、配置说明

2.1 vue.config.js 配置文件

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

vue.config.js 官方文档: 《vue.config.js 配置参考》

2.2 devServer.proxy 配置项

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

javascript 复制代码
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

官方文档: 《devServer.proxy 配置项》

相关推荐
南风木兮丶6 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少19 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务21 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
mldong23 分钟前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
Mintopia28 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia30 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie31 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei32 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲34 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun
Olrookie35 分钟前
若依前后端分离版学习笔记(十七)——ruoyi开发规范&流程,请求流程,依赖引入,组件注册&通信
前端·笔记