場(chǎng)景
使用webpack-dev-server驅(qū)動(dòng)前端項(xiàng)目時(shí),開(kāi)發(fā)工程中由于訪問(wèn)的webpack-dev-server啟動(dòng)的本地服務(wù)器，當(dāng)前端工程中需要使用服務(wù)端api時(shí)（特別是服務(wù)端api如果再有一些權(quán)限驗(yàn)證的過(guò)程，比如要使用cookie做登陸判斷），不能自動(dòng)將cookie攜帶過(guò)去，api驗(yàn)證過(guò)程失敗。
解決方法
使用nginx代理，設(shè)置一個(gè)合法的cookie。
具體實(shí)現(xiàn)
假設(shè)webpack-dev-server啟動(dòng)端口 127.0.0.1:8888
服務(wù)端api地址 : api.test.net
路由：/v1/user
本地nginx啟動(dòng) 127.0.0.1:9999來(lái)代理127.0.0.1:8888 使用到的api請(qǐng)求
webpack配置
devServer: {
host: 'localhost',
port: 8888, //webpack-dev-server啟動(dòng)端口
proxy: { //代理配置，此處是將所有/v1/*請(qǐng)求通過(guò) nginx代理，具體代理規(guī)則可以通過(guò)nginx配置設(shè)置
'/v1/*': {
target: 'http://127.0.0.1:9999' //代理服務(wù)器地址 ，此處使用nginx代理
}
}
},
nginx配置
upstream serverApi {
api.test.net;
}
server {
listen 9999; #代理服務(wù)器端口
server_name localhost; #域名
access_log /var/nginx/logs/access.log main;
error_log /var/nginx/logs/error.log;
location / { #路由規(guī)則 代理所有請(qǐng)求到api.test.net
proxy_pass http://serverApi;
proxy_set_header Cookie 'token="12344566"'; #設(shè)置http頭，指定cookie, 具體可查看nginx相關(guān)文檔
}
}
