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

相关推荐
eason_fan2 小时前
Rspack核心解析:Rust重写Webpack的性能革命与本质
前端·前端工程化
诗意地回家2 小时前
淘宝小游戏反编译
开发语言·前端·javascript
徐同保2 小时前
react两个组件中间加一个可以拖动跳转左右大小的功能
前端·javascript·react.js
爱迪斯通2 小时前
MANUS:用于视觉、语言、行动模型创建的高保真第一人称数据采集设备
前端
bjzhang752 小时前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
全栈王校长2 小时前
Vue.js 3 模板语法与JSX语法详解
vue.js
薛定谔的猫22 小时前
Cursor 系列(3):关于MCP
前端·cursor·mcp
全栈王校长3 小时前
Vue.js 3 项目构建:从 Webpack 到 Vite 的转变之路
vue.js
sheji34163 小时前
【开题答辩全过程】以 基于web的拍卖系统设计与实现为例,包含答辩的问题和答案
前端
明月_清风3 小时前
模仿 create-vite / create-vue 风格写一个现代脚手架
前端·后端