前言
在項(xiàng)目開發(fā)中氮双，接口聯(lián)調(diào)的時候一般都是同域名下，且不存在跨域的情況下進(jìn)行接口聯(lián)調(diào)胀滚，但是當(dāng)我們現(xiàn)在使用vue-cli進(jìn)行項(xiàng)目打包的時候趟济，我們在本地啟動服務(wù)器后，比如本地開發(fā)服務(wù)下是 http://localhost:8080 這樣的訪問鏈接咽笼，但是我們的接口地址是 http://www.xxx.com/save/post 這樣的顷编，我們這樣直接使用就會存在跨域的請求，導(dǎo)致接口請求不成功剑刑。
PS：目前用的是webpack 3.6版本媳纬，是在Vue-cli中集成的。
那么我們該怎么解決呢施掏？
只要將接口地址通過代理的方式映射到本地钮惠，讓我們的本地開發(fā)也可以使用相對根目錄的方式請求接口。
webpack本身自帶了代理功能七芭，只要經(jīng)過簡單的配置即可萌腿。
我們打開下面路徑的文件
config/index.js
在其中的dev對象里面找到：proxyTable: {}
這里就是配置代理的地方，我們進(jìn)行如下設(shè)置：
dev: {
// 代理配置表抖苦，在這里可以配置特定的請求代理到對應(yīng)的API接口
proxyTable: {
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口毁菱，需要配置這個參數(shù)為true
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個參數(shù)配置為true
pathRewrite: {
'^/api': ''
}
}
},
}
接口地址原本是 /save/post锌历，但是為了匹配代理地址贮庞，在前面加一個 /api, 因此接口地址需要寫成這樣的即可生效 /api/save/post。
注意：
'/api'為匹配項(xiàng)究西，target為被請求的地址窗慎，因?yàn)檎埱蟮?url 中加了前綴'/api'，而原本的接口是沒有這個前綴的卤材，所以需要通過pathRewrite來重寫地址遮斥，將前綴'/api'轉(zhuǎn)為''或者'/'。如果本身的接口地址就有'/api‘ 這種通用前綴扇丛，就可以把pathRewrite刪掉术吗。
webpack代理設(shè)置請參閱：https://webpack.js.org/configuration/dev-server/#devserver-proxy
有用的配置教程視頻：https://ke.qq.com/course/350693?tuin=undefined&taid=2704450712328677
附：
Nginx和webpack配置支持Websocket
一、Nginx配置
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream ws {
server localhost:8081;
server localhost:8082;
}
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://ws;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
二帆精、webpack配置
proxyTable: {
'/api': {
target: 'http://localhost:8081/',
changeOrigin: true,
ws: true,
secure: false,
pathRewrite: {
'^/api': ''
}
}
},
//多代理
proxyTable: {
'/api': {
target: 'http://192.168.0.106:8080',
changeOrigin: true,
pathRewrite: { '^/api': ''}
},
'/ips': {
target: 'http://pv.sohu.com',
changeOrigin: true,
pathRewrite: { '^/ips': ''}
}
}
