vue项目配置代理,解决跨域问题

直接在浏览器访问项目环境地址,一切功能正常,但本地启动前端vue项目接口全都报错跨域问题

解决方法:配置代理。具体步骤如下:

  1. vue.config.js 中配置以下代码:

    复制代码
     devServer: {
         ......
         // 本地开发代理,解决 CORS 问题
         proxy: {
             '/api': {
                 target: '(你对接的服务端地址)',
                 changeOrigin: true,
                 pathRewrite: { '^/api': '' }, // 将 /api 替换为空 -> 转到后端根路径
                 secure: false
             }
         }
         ......
     },
  2. api\base\config.js 中配置以下代码:

    // api/base/config.js(开发环境)
    const BASE_URL = '/api' // 开发期间走 devServer proxy
    // 生产环境可用环境变量替换为真实地址
    // const BASE_URL = process.env.VUE_APP_BASE_URL || '/api'
    export { BASE_URL }

  3. 配置完成后重新启动项目即可。

相关推荐
D_C_tyu15 小时前
JavaScript | 数独游戏核心算法实现
javascript·算法·游戏
海天鹰15 小时前
EXIF-JS
javascript
清汤饺子15 小时前
【译】我的 AI 进阶之路:从怀疑到深度整合
前端·javascript·后端
@菜菜_达16 小时前
Vue生命周期
前端·javascript·vue.js
每天吃饭的羊16 小时前
UMD和IIfe
开发语言·前端·javascript
gCode Teacher 格码致知16 小时前
Javascript提高:自定义的占位符替换-由Deepseek产生
开发语言·javascript·ecmascript
前端那点事16 小时前
Vue线上代码调试全攻略(安全无侵入,新手也能上手)
前端·vue.js
前端那点事16 小时前
Vue批量文件上传并发踩坑指南:3步解决阻塞、限流、进度混乱
前端·面试
桔筐16 小时前
Vue3 v-model 双向绑定导致循环触发的坑
前端·javascript·vue.js
Alice-YUE16 小时前
前端图片优化完全指南:从格式到加载的全面提速方案
前端·笔记·学习