vue3解决跨域问题

跨域，跨的是不同域，也就是协议或主机或或端口号不同造成的现象

一般情况下就算后端，把访问源全部放开也会出现这种现象，所以我们前端自己解决

这里我采用的是vue-cli中webpack涉及的代理proxy

在使用代理之前，我想先说明一下，我们平常在测试接口的时候，是在本地，而不是服务器，所以我们也就需要两个url

开发时，在本地就用代理，生产时（上线时）也就用正常的服务器ip+端口

那么项目打包后也就是上线，项目serve就是开发，这很好理解

所以，我们需要建立两个文件，第一个为.env.development，第二个为.env.production

在.env.development中

VUE_app_BASE_URL=/api

在.env.production中

VUE_app_BASE_URL=http://服务器ip:端口

在axios封装里面

axios.defaults.baseURL=process.env.VUE_app_BASE_URL

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'

//post请求头

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

那么，区分开发和生产就完成了

接下来就写代理吧，

在项目根目录下建立vue.config.js文件

只需要看最后的devServer部分

我们把http://124.70.108.80:3000用/api代替了，也就是说我们只要使用/api就是前面的地址

允许改变源(changeOrigin)必须为true，ws也就是websocket

使用的时候