我需要做一个CORS post request
。我需要使用fetch
,因为axios
的response
已经被处理成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));
6条答案
按热度按时间bbmckpt71#
fetch返回的Headers类示例是一个iterable,而不是像axios返回的普通对象。一些iterable的数据,如Headers或URLSearchParams,不能从控制台查看,您必须迭代它并console.log每个元素,如:
rta7y2nd2#
标头仅限于CORS请求。请参见https://stackoverflow.com/a/44816592/2047472
(Use
access-control-expose-headers
,允许将头暴露给来自不同来源的请求。)vi4fp9gy3#
虽然正确的答案是来自@AndyTheEntity的那个,但对我来说有点不完整。
CORS请求具有限制,并且仅显示头的子集:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
为了在响应上显示更多的头,服务器必须添加一个头,以允许更多的额外头。
例如,在POST请求之后,如果创建了一个新资源,则应返回201 CREATED响应并添加
Location
头。如果需要接受CORS,则还需要添加下一个头(在server响应上):这样你就可以在客户端看到头文件
Location
。如果你需要发送一个特定的header(比如
SESSION_ID
),那么你需要在request中添加下一个header:我希望这篇文章涵盖了使用CORS处理请求/响应的所有需求。
vwhgwdsa4#
要获取特定的标头属性,可以使用以下命令:
pxq42qpu5#
另一种选择是使用
Object.fromEntries()
,例如Object.fromEntries(response.headers)
或Object.fromEntries(response.headers.entries())
。此方法将键值对列表转换为对象。**注意:**Internet Explorer和Opera Android目前不支持,请参阅MDN文档中的浏览器兼容性。
kulphzqa6#
这一个从另一个答案在这里垃圾邮件我的控制台与重复的.headers内容:
response.headers.forEach(console.log)
但是这个可以用,它创建了一个Map:
console.log(...response.headers)
或者为了更好地阅读控制台输出,请检查以下答案:https://stackoverflow.com/a/70821115/4394435