vue 前端通过代理解决跨域问题

悟世君子

于 2020-03-22 15:14:05 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wsjzzcbq/article/details/105028134

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用Vue和Webpack配置代理解决跨域问题，通过设置proxyTable，将/api请求代理到本地不同端口，实现前后端分离开发。

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

前后端分离进行项目开发，跨域问题不可避免，解决方式有多种，可以后端解决，也可以前端解决，本文介绍前端如何解决跨域问题

vue前端解决跨域问题，可以通过 webpack的代理进行解决

首先找到设置代理的地方，在项目的 config文件夹下的 index.js文件里，找到 proxyTable 设置

配置如下

proxyTable: {
    '/api':{
        target: 'http://localhost:8082',
        changeOrigin: true,
        pathRewrite: {
        '^/api': '/'
        }
    }
}

说明：如果当前vue项目启动后，运行在 localhost:8080域名下，当请求 localhost:8080/api/login 时，会被代理到 localhost:8082/login 地址。因此，为了方便起见，一般会在 axios 中配置公共请求前缀 /api，这样在请求后台时就不用每个请求都加上 /api 了，如请求 /login，直接 this.axios.get(/login).then(）即可