跨域，跨的是不同域，也就是協(xié)議或主機(jī)或或端口號(hào)不同造成的現(xiàn)象

一般情況下就算后端，把訪問(wèn)源全部放開(kāi)也會(huì)出現(xiàn)這種現(xiàn)象，所以我們前端自己解決

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

在使用代理之前，我想先說(shuō)明一下，我們平常在測(cè)試接口的時(shí)候，是在本地，而不是服務(wù)器，所以我們也就需要兩個(gè)url

開(kāi)發(fā)時(shí)，在本地就用代理，生產(chǎn)時(shí)（上線時(shí)）也就用正常的服務(wù)器ip+端口

那么項(xiàng)目打包后也就是上線，項(xiàng)目serve就是開(kāi)發(fā)，這很好理解

所以，我們需要建立兩個(gè)文件，第一個(gè)為.env.development，第二個(gè)為.env.production

在.env.development中

VUE_app_BASE_URL=/api

在.env.production中

VUE_app_BASE_URL=http://服務(wù)器ip:端口

在axios封裝里面

axios.defaults.baseURL=process.env.VUE_app_BASE_URL

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

//post請(qǐng)求頭

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

那么，區(qū)分開(kāi)發(fā)和生產(chǎn)就完成了

接下來(lái)就寫(xiě)代理吧，

在項(xiàng)目根目錄下建立vue.config.js文件

只需要看最后的devServer部分

我們把http://124.70.108.80:3000用/api代替了，也就是說(shuō)我們只要使用/api就是前面的地址

允許改變?cè)?changeOrigin)必須為true，ws也就是websocket

使用的時(shí)候