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. 配置完成后重新启动项目即可。

相关推荐
kyriewen10 分钟前
从本地到生产:迁移到 GitHub Actions 自动化 CI/CD,总结了这 5 个坑
前端·github·自动化运维
雨季mo浅忆23 分钟前
首个Vue3项目边写边学边记
前端·vue3
IT_陈寒1 小时前
React中useEffect依赖项这个坑我居然踩了三天
前端·人工智能·后端
qq4356947012 小时前
Vue04
前端·vue.js
Yeats_Liao3 小时前
Feed流系统设计(三):数据模型与存储设计,从表结构到Redis收件箱
java·javascript·redis
我是真菜3 小时前
彻底理解js中的深浅拷贝
前端·javascript
江畔柳前堤3 小时前
github实战指南07-CLI 与高级技巧
前端·人工智能·chrome·深度学习·github·caffe·issue
kisdiem3 小时前
ReAct:让大模型一边推理,一边行动
前端·react.js·前端框架
西部荒野子4 小时前
JS 如何跑进两个原生世界
前端
RANxy4 小时前
AntV 入门系列第一篇:从零开始的数据可视化之旅
前端