工做過程當中碰見一個問題,使用Vue-cli 搭建了一個工程,因爲跨域的問題 使用了自帶的dev-server Express Server(A後臺) http-proxy-middleware 去訪問後臺的接口nginx Server(B後臺),而這個接口爲niginx 代理的另外一個後臺(C後臺),理清一下關係:javascript
開發頁面去請求A後臺(devServer)的接口, 而後這個請求會被轉發的B後臺(nginx), 而後再會被nginx映射到C後臺(咱們真實要訪問的後臺),你可能會問爲何不用A直接去代理訪問C, 非要在中間加了個nginx呢 ? 因爲C是個交換機設備上的server, 直接用個人A (devServer)去代理C很差使,因此纔有這樣的情景。java
從B到C的過程一切都很正常,可是從A到B中間的每次的請求返回時connection 都是close , 而正常的是keep-alive的,這就致使我在頁面裏登陸成功後 繼續請求其餘接口仍是驗證不經過。網上找了好多資料都很差使。jquery
最終解決方案是,(當一條路走不通的時候,換一條試試):nginx
跨域問題解決的方法之一, CORS ajax
經過修改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的認證信息了,而後再進行頁面的直接訪問接口就能夠正常使用了。cookie