🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 5. CORS 进阶之 Expose-Headers #### 1. getAllResponseHeaders 这一篇来讲讲如何获得从跨域的服务器端返回的响应头部信息。先用一段js获取响应的头部信息: ``` var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { console.log(xhttp.getAllResponseHeaders()); } }; xhttp.open("GET", "http://localhost:8080", true); xhttp.send(); ``` 效果图如下: ![](https://box.kancloud.cn/b2a93d1d126eb263ac28a2dc928c0a9a_736x325.png) 内容是下面这样的: ``` Last-Modified: Fri, 15 Jan 2016 06:03:50 GMT Content-Type: text/html ``` 这样是OK的,然而有时候会在服务器端自己添加响应的头部信息,比如: ``` add_header 'X-Powered-By' 'rails365'; ``` 那又能否获得到呢,来试一下: ![](https://box.kancloud.cn/3e53901d43711d5ac2bb254005be6836_657x330.png) 没有生效,也没有报错。 #### 2. Access-Control-Expose-Headers 然而,我们需要服务器端处理一下,把`X-Powered-By`这个头部能够让客户端的js读取到。 这就是`Access-Control-Expose-Headers`这个指令所发挥的作用。 ``` add_header 'X-Powered-By' 'rails365'; add_header 'Access-Control-Expose-Headers' 'X-Powered-By'; ``` 重新发送跨域请求: ![](https://box.kancloud.cn/9a9f1b41a6f3dff1122d6fc7094e0f88_642x351.png) 可见,成功输出了响应的头部信息`X-Powered-By`的内容了。 完结。