跨域系列五：CORS進階之Expose-Headers

一.getAllResponseHeaders
　　這一篇來講講如何獲得從跨域的服務器端返回的響應頭部信息。先用一段js獲取響應的頭部信息：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
  console.log(xhttp.getAllResponseHeaders());
  }
};
xhttp.open("get", "http://10.107.98.46:8088/AngularTodoMVC/index.html", true);
xhttp.send();

　　效果圖如下：

 

　　這樣是OK的，然而有時候會在服務器端自己添加響應的頭部信息，比如：

add_header 'X-Powered-By' 'bijian';

　　那又能否獲得到呢，來試一下：

　　沒有生效，也沒有報錯。

二.Access-Control-Expose-Headers
　　然而，我們需要服務器端處理一下，把X-Powered-By這個頭部能夠讓客戶端的js讀取到。
　　這就是Access-Control-Expose-Headers這個指令所發揮的作用。

add_header 'X-Powered-By' 'bijian';
add_header 'Access-Control-Expose-Headers' 'X-Powered-By';

　　重新發送跨域請求：

 

　　可見，成功輸出了響應的頭部信息X-Powered-By的內容了。

 

文章來源：http://corsbook.rails365.net/467082

附一前端學習視頻地址：https://www.rails365.net/playlists