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

相关推荐
万少4 小时前
小龙虾(openclaw),轻松玩转自动发帖
前端·人工智能·后端
Jagger_5 小时前
抱怨到躺床关灯的一次 DIY 记录
前端
陈随易8 小时前
前端大咖mizchi不满Rust、TypeScript却爱上MoonBit
前端·后端·程序员
whinc9 小时前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
兆子龙10 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙10 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
sure28210 小时前
React Native中创建自定义渐变色
前端·react native
KKKK11 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰11 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端