如何解决Vue中Axios跨域请求的问题

配置

我们在vue项目中使用axios请求接口时可能会遇到跨域的问题，要解决跨域问题，需要先在配置文件vue.config.js里添加以下代码：

//配置axios跨域请求
    devServer: {
        proxy: {
            '/api': { //访问路径，可以自己设置，
                target: 'http://localhost:8081', //代理接口，即请求的url的前缀
                changeOrigin: true, //设置是否跨域，开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
                ws: true, // 是否启用websockets
                pathRewrite: { //访问路径重写
                    '^/api': ''
                }
            }
        }
    }

修改完配置文件后，一定要记得重启项目，否则修改不会生效！

使用

重启项目后，就可以使用axios请求后台接口了：

axios("/api/activity").then((res)=>{
      console.log(res)
 })

这里调用请求时请求的url地址是/api/activity，而实际请求的是(http://localhost:8081/activity)，如果你不想每次请求都带上/api，那么你可以在main.js中添加以下代码：

axios.defaults.baseURL = "/api";

这段代码会在你每次请求的url前加上/api的前缀，这样我们可以再修改一下上面的代码：

axios("activity").then((res)=>{
      console.log(res)
})

至此，完成以上配置后就可以愉快的对接口啦！

参考

devServer之proxy跨域

Vue使用axios实现跨域请求

vue 使用axios 出现跨域请求的两种解决方法