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

相关推荐
重铸码农荣光1 小时前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·前端框架
攻心的子乐1 小时前
redission 分布式锁
前端·bootstrap·mybatis
前端老宋Running1 小时前
拒绝“无效焦虑”:为什么你 80% 的 useMemo 都在做负优化?
前端·javascript·react.js
m0_740043731 小时前
Vue简介
前端·javascript·vue.js
我叫张小白。1 小时前
Vue3 v-model:组件通信的语法糖
开发语言·前端·javascript·vue.js·elementui·前端框架·vue
北辰alk1 小时前
Vue 的 keep-alive 生命周期钩子全解析:让你的组件“起死回生”
vue.js
undsky1 小时前
【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案
前端·uni-app
Tonychen1 小时前
【React 源码阅读】useEffectEvent 详解
前端·react.js·源码
天天向上10241 小时前
vue3 封装一个在el-table中回显字典的组件
前端·javascript·vue.js