工作過程中遇見一個問題,使用Vue-cli 搭建了一個工程,由於跨域的問題 使用了自帶的dev-server Express Server(A后台) http-proxy-middleware 去訪問后台的接口nginx Server(B后台),而這個接口為niginx 代理的另一個后台(C后台),理清一下關系:
開發頁面去請求A后台(devServer)的接口, 然后這個請求會被轉發的B后台(nginx), 然后再會被nginx映射到C后台(我們真實要訪問的后台),你可能會問為什么不用A直接去代理訪問C, 非要在中間加了個nginx呢 ? 由於C是個交換機設備上的server, 直接用我的A (devServer)去代理C不好使,所以才有這樣的情景。
從B到C的過程一切都很正常,但是從A到B中間的每次的請求返回時connection 都是close , 而正常的是keep-alive的,這就導致我在頁面里登錄成功后 繼續請求其他接口還是驗證不通過。網上找了好多資料都不好使。
最終解決方案是,(當一條路走不通的時候,換一條試試):
跨域問題解決的方法之一, CORS
通過修改ngnix配置文件,加入allow-origin頭
location ~ \.do$ {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; //這個是我的A devServer,必須設置具體的值,不要使用* 否則訪問接口的時候瀏覽器會報錯
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Credentials' true;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
proxy_pass http://172.16.15.65;
}
配置完這個重啟nginx然后你的頁面里直接寫B的接口就不會存在跨域問題了,但是這個時候如果登錄的過程中產生了一個cookie這個信息在你后面訪問借口的時候不會自動添加上的,需要在你的ajax里面加上withCredentials,例如jquery 的ajax
$.ajax({
url : "*****",
type : post,
dataType : params.dataType,
data : cliPostData,
cache : false,
//注意這里
xhrFields: {
withCredentials: true
},
success : function(data) {
}
})
這樣就可以攜帶cookie的認證信息了,然后再進行頁面的直接訪問接口就可以正常使用了。
