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

相关推荐
随风一样自由16 分钟前
【前端+跨端技术新格局】Tauri vs Electron 完整性能对比(2026实测数据+底层原理)
前端·javascript·electron
L-影23 分钟前
Pydantic 模型:为你的 Web 数据装上“安检系统”
前端
Reload.35 分钟前
GJ航司,验证码网易易盾 JS逆向 纯算轨迹
开发语言·前端·javascript
L-影37 分钟前
FastAPI 请求头与 Cookie:Web 世界的“身份证”与“通行证”
前端·fastapi
IT_陈寒38 分钟前
Vue的响应式更新把我坑惨了,原来是这个原因
前端·人工智能·后端
铁皮饭盒44 分钟前
Bun.js 集成了 SQL/Redis/S3,为什么 Java/Go/Python 不集成?
javascript
年轻的砖头1 小时前
以Ajax方式提交整个表单
前端·javascript·ajax
L-影1 小时前
FastAPI CORS 跨域:Web 世界的“小区门禁”与“访客通行证”
前端·javascript·fastapi
stereohomology1 小时前
已进入初赛提交Demo的两个项目:(2)单独html钢琴
前端·html·why不coding
源图客1 小时前
Claude Code基础使用
服务器·前端·数据库