webstorm vue项目 axios 跨域代理

vue.config.js：（如果没有该文件就创建一个，或者是config/index.js）

module.exports = {
    devServer: {
        // 这个是前端项目启动的端口号，vue默认8080，如果与你后端端口不冲突，就不用修改
        port: 8888,
        // 配置不同的后台API地址
        proxy: {
            '/api': {//本地后端接口
                target: 'http://localhost:8080',
                ws: true,//websockets
                changeOrigin: true,//在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {//路径重写
                    '^/api': ''//如果你不喜欢/api就把他改成你想要的，ps:'^/api': '/aaa'
                }
            }
        }
    }
};

axios请求：

axios.post(
          '/api//getAllUser',//ps:如果你重写了路径，此处为：'/aaa//getAllUser'
).then(function(resp) {
    console.log(resp.data);
});

最后一步：重新启动你的前端项目，一定要重启项目，不然代理是不会成功的

虽然，你查看network，会发现：

最后

以上就是潇洒豌豆为你收集整理的webstorm vue项目 axios 跨域代理的全部内容，希望文章能够帮你解决webstorm vue项目 axios 跨域代理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。