場景
使用webpack-dev-server驅(qū)動前端項目時,開發(fā)工程中由于訪問的webpack-dev-server啟動的本地服務(wù)器呵恢,當(dāng)前端工程中需要使用服務(wù)端api時(特別是服務(wù)端api如果再有一些權(quán)限驗證的過程腰吟,比如要使用cookie做登陸判斷)谭确,不能自動將cookie攜帶過去,api驗證過程失敗徙缴。
解決方法
使用nginx代理,設(shè)置一個合法的cookie。
具體實現(xiàn)
假設(shè)webpack-dev-server啟動端口 127.0.0.1:8888
服務(wù)端api地址 : api.test.net
路由:/v1/user
本地nginx啟動 127.0.0.1:9999來代理127.0.0.1:8888 使用到的api請求
webpack配置
devServer: {
host: 'localhost',
port: 8888, //webpack-dev-server啟動端口
proxy: { //代理配置撕瞧,此處是將所有/v1/*請求通過 nginx代理,具體代理規(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ī)則 代理所有請求到api.test.net
proxy_pass http://serverApi;
proxy_set_header Cookie 'token="12344566"'; #設(shè)置http頭丛版,指定cookie, 具體可查看nginx相關(guān)文檔
}
}