如何从浏览器中的 Fetch 请求中获取标头位置值

Posted 2023-03-04

【中文标题】如何从浏览器中的 Fetch 请求中获取标头位置值

【英文标题】：How to get Header Location value from a Fetch request in browser

【发布时间】：2016-12-20 00:30:16

【问题描述】：

从 ReactJS - Redux 前端应用程序，我尝试获取 REST API 响应的 Location Header 值。

当我卷曲这个时：

curl -i -X POST -H "Authorization: Bearer MYTOKEN" https://url.company.com/api/v1.0/tasks/

我有这个答案：

HTTP/1.1 202 ACCEPTED
Server: nginx
Date: Fri, 12 Aug 2016 15:55:47 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Location: https://url.company.com/api/v1.0/tasks/status/idstatus

当我在 ReactJS 中进行 Fetch 时

    var url = 'https://url.company.com/api/v1.0/tasks/'
    fetch(url, 
            method: 'post',
            credentials: 'omit',
                headers: 
                    'Authorization': `Bearer $token`
                
            
     )

我在响应对象中没有任何标题： No header in Fetch request

我尝试了我在https://developer.mozilla.org/en-US/docs/Web/API/Headers 中找到的所有 response.headers 函数：

response.headers.get('Location');

但是，由于标题为空，我的结果为空。

你知道为什么我不能得到一个正确的 Header 对象来填充标题值吗？

【问题讨论】：

fetch api 可能只公开某些标头。 ***.com/a/5837798/1515758

谢谢@John，它帮了我很多。

【参考方案1】：

感谢约翰，我找到了答案。

我只好放了

Access-Control-Expose-Headers: Location

到我的响应标头并且它有效，所以现在我可以访问 Location 值：

response.headers.get('Location');

谢谢约翰！

【讨论】：

<ExposeHeader> 对于那些在 AWS S3 存储桶策略 CORS XML 文件中进行设置的人

基本上通过 CORS，您的服务器代码告诉 Web 浏览器（在 JS 中运行 fetch）可以读取 Location: header

第一行写在哪里？

@Prime 进入您尝试访问的响应的标题。

Access-Control-Expose-Headers: Location 标题对我不起作用

【参考方案2】：

HttpRequest req = new HttpRequest();

req.setHeader('Access-Control-Allow-Origin', '*');

req.setHeader('Access-Control-Allow-Credentials', 'true');

response.getHeader('位置'); //不要使用 response.getHeader('Location'); //这可能会导致问题。

【参考方案3】：

除了在服务器中公开 Location Header。

我可以通过以下方式访问反应应用程序中的位置：

response.headers.location;