vue前端配置反向代理解决跨域问题

最新推荐文章于 2025-06-25 16:04:19 发布

行走的毛毛虫

最新推荐文章于 2025-06-25 16:04:19 发布

阅读量946

点赞数

CC 4.0 BY-SA版权

分类专栏： vue html 文章标签： vue html

本文链接：https://blog.csdn.net/wei80231996/article/details/110530083

vue 同时被 2 个专栏收录

54 篇文章

订阅专栏

html

17 篇文章

订阅专栏

博客介绍了在Vue项目中解决接口问题的方法。若使用Vue 3以上版本，在根目录vueConfig.js中找到proxyTable配置；若不是，在项目config文件夹下的index.js中找。之后在api封装或写接口地址的文件夹操作，最后重启项目即可解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在项目中的config文件夹下面index.js中（如果你用的是vue3以上请在根目录下找到vueConfig.js）中找到proxyTable：{}配置

proxyTable: {
      '/baseApi': {
        target: 'https://XXXXXXXXXX.com',//服务器地址 及接口地址
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，允许跨域
        secure: false, // https下设置为true
        pathRewrite: {
            "^/baseApi": ""//重写
        }
      },
    },

2.找到你的api封装或者写接口地址的文件夹写上

const isDev = process.env.NODE_ENV === 'development'
const HOST = isDev ? '/baseApi' : ''//    /baseApi这个是反向代理中你自己定义的变量名
export const api = {
    baseUrl: HOST,
}
export default {
 例如：login:`${HOST}/api/login` //拼接上代理名
}

3.重启项目在运行完美解决