javascript 获取响应中缺少标头

rsl1atfo  于 2023-04-19  发布在  Java
关注(0)|答案(6)|浏览(130)

我需要做一个CORS post request。我需要使用fetch,因为axiosresponse已经被处理成json了。
但是在fetch响应中,headers是空的。但是我不认为这是服务器的问题,因为axios响应头有我想要的值。
有什么花招吗?

fetch('http://localhost:9876/test/sample-download', {
        method: 'post',
        headers: {},
        body: {}
    })
        .then(response => {
            console.log(response);
        })
        .catch(err => console.error(err));

    axios.post('http://localhost:9876/test/sample-download', {}, {})
        .then(response => console.log(response))
        .catch(error => console.error(error));
bbmckpt7

bbmckpt71#

fetch返回的Headers类示例是一个iterable,而不是像axios返回的普通对象。一些iterable的数据,如Headers或URLSearchParams,不能从控制台查看,您必须迭代它并console.log每个元素,如:

fetch('http://localhost:9876/test/sample-download', {
    method: 'post',
    headers: {},
    body: {}
})
.then(response => {
  // Inspect the headers in the response
  response.headers.forEach(console.log);
  // OR you can do this
  for(let entry of response.headers.entries()) {
    console.log(entry);
  }
})
.catch(err => console.error(err));
rta7y2nd

rta7y2nd2#

标头仅限于CORS请求。请参见https://stackoverflow.com/a/44816592/2047472
(Use access-control-expose-headers,允许将头暴露给来自不同来源的请求。)

vi4fp9gy

vi4fp9gy3#

虽然正确的答案是来自@AndyTheEntity的那个,但对我来说有点不完整。
CORS请求具有限制,并且仅显示头的子集:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

为了在响应上显示更多的头,服务器必须添加一个头,以允许更多的额外头。
例如,在POST请求之后,如果创建了一个新资源,则应返回201 CREATED响应并添加Location头。如果需要接受CORS,则还需要添加下一个头(在server响应上):

Location: $url-of-created-resource
Access-Control-Expose-Headers: Location

这样你就可以在客户端看到头文件Location
如果你需要发送一个特定的header(比如SESSION_ID),那么你需要在request中添加下一个header:

Access-Control-Request-Headers: SESSION_ID
SESSION_ID: $current_session_id

我希望这篇文章涵盖了使用CORS处理请求/响应的所有需求。

vwhgwdsa

vwhgwdsa4#

要获取特定的标头属性,可以使用以下命令:

response.headers.get(yourProperty)
pxq42qpu

pxq42qpu5#

另一种选择是使用Object.fromEntries(),例如Object.fromEntries(response.headers)Object.fromEntries(response.headers.entries())。此方法将键值对列表转换为对象。

fetch("https://www.google.com").then(response => console.log(Object.fromEntries(response.headers)))
//-> Promise <pending>

// console.log output:
{
    "alt-svc": "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-T051=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,quic=\":443\"; ma=2592000; v=\"46,43\"",
    "bfcache-opt-in": "unload",
    "cache-control": "private, max-age=0",
    "content-encoding": "br",
    "content-length": "41556",
    "content-security-policy": "upgrade-insecure-requests",
    "content-type": "text/html; charset=UTF-8",
    "date": "Wed, 04 Aug 2021 08:09:30 GMT",
    "expires": "-1",
    "server": "gws",
    "strict-transport-security": "max-age=31536000",
    "x-frame-options": "SAMEORIGIN",
    "x-xss-protection": "0"
}

**注意:**Internet Explorer和Opera Android目前不支持,请参阅MDN文档中的浏览器兼容性。

kulphzqa

kulphzqa6#

这一个从另一个答案在这里垃圾邮件我的控制台与重复的.headers内容:
response.headers.forEach(console.log)
但是这个可以用,它创建了一个Map:
console.log(...response.headers)
或者为了更好地阅读控制台输出,请检查以下答案:https://stackoverflow.com/a/70821115/4394435

相关问题