是否可以使用fetch API为每个请求设置默认头?
我想做的是,只要localStorage
中有json web令牌,就设置一个Authorization
头。我目前的解决方案是使用以下函数设置头:
export default function setHeaders(headers) {
if(localStorage.jwt) {
return {
...headers,
'Authorization': `Bearer ${localStorage.jwt}`
}
} else {
return headers;
}
}
在获取请求中设置标头将如下所示:
return fetch('/someurl', {
method: 'post',
body: JSON.stringify(data),
headers: setHeaders({
'Content-Type': 'application/json'
})
})
但必须有更好的方法来做到这一点。我目前正在开发一个React/Redux/Express应用程序,如果这有任何帮助的话。
5条答案
按热度按时间67up9zun1#
创建一个
fetch
Package 器可以解决您的问题:如果您更喜欢Axios或其他软件包,您还可以为应用程序中的所有调用轻松切换请求客户端。您还可以执行其他操作,如检查
options.body
是否为对象,并添加'Content-Type: application/json
头。vwkv1x7d2#
您可以使用Axios代替fetch,并使用拦截器
其中Api是一个带有基本URL的axios对象
当你得到你的令牌时,你只需要调用函数setAuthorization。
ndh0cuux3#
Andri Möll为
fetch
创建了一个FetchDefaults.js mixin来设置提取默认值:根据AGPL-3.0-only许可证分发
uwopmtnx4#
您可以覆盖默认的获取API:
参考文献:
fquxozlt5#
一个快速但不推荐的方法是重新定义默认的
.fetch()
函数:代码未经测试且未完成。如果您决定使用此答案,请检查
arguments.length
,添加代码以保留现有的头文件,等等。我只是提供进一步探索的方向。