Authorization header in img src link
Authorization header in img src link
我有一个使用jwt进行身份验证的api。我正在为一个vuejs应用程序使用这个api。我尝试使用
在应用程序中显示图像，但是api需要在其中的jwt token的Authorization头。
我可以像这样向浏览器请求添加头部吗？（这里的几个问题的答案让我相信这是不可能的）
有没有绕过它的方法（使用js）或者我应该改变api本身？
admin 更改状态以发布 2023年5月21日
默认情况下，浏览器会发送cookie。如果在fetch上设置标题的{credentials：'omit'}，可以防止cookie发送。MDN
完整的fetch示例：
const user = JSON.parse(localStorage.getItem('user'));
let headers = {};
if (user && user.token) {
headers = { 'Authorization': 'Bearer ' + user.token };
}
const requestOptions = {
method: 'GET',
headers: headers,
credentials: 'omit'
};
let req = await fetch(`${serverUrl}/api/v2/foo`, requestOptions);
if (req.ok === true) {
...
现在，当您登录您的网站时，Web应用程序可以将凭据保存到localStorage和cookie中。例如：
let reqJson = await req.json();
// response is: {token: 'string'}
//// login successful if there's a jwt token in the response
if (reqJson.token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('user', JSON.stringify({token: reqJson.token}));
document.cookie = `token=${reqJson.token};`; //set the cookies for img, etc
}
因此，您的Web应用程序使用了localStorage，就像您的智能手机应用程序一样。浏览器通过默认发送cookie获取所有静态内容（img、video、a href）。
在服务器端，如果没有授权标头，可以将cookie复制到授权标头中。
Node.js+express示例：
.use(function(req, res, next) { //function setHeader
if(req.cookies && req.headers &&
!Object.prototype.hasOwnProperty.call(req.headers, 'authorization') &&
Object.prototype.hasOwnProperty.call(req.cookies, 'token') &&
req.cookies.token.length > 0
) {
//req.cookies has no hasOwnProperty function,
// likely created with Object.create(null)
req.headers.authorization = 'Bearer ' + req.cookies.token.slice(0, req.cookies.token.length);
}
next();
})
我希望它能帮助某些人。
