img src链接中的授权标头

Question

我有一个使用qazxsw poi进行身份验证的qazxsw poi。我正在使用这个api用于api应用程序。我正在尝试使用应用程序在应用程序中显示图像

jwt

但是vuejs期待<img src="my/api/link" /> 头球与api。

我可以像这样在浏览器请求中添加标题（这里几个问题的回答让我相信它不可能）？

是否有任何方法（使用js）或我应该更改Authorization本身？

Answer 1

您无法对img标记中直接用作href的图像执行身份验证。如果你真的想在你的图像上使用这种类型的身份验证，那么最好使用ajax获取它们然后嵌入你的html中。

Answer 2

jwt token

在后端，您从queryparam验证JWT。

Answer 3

默认情况下，浏览器会发送cookie。如果你设置标题的api，你可以阻止在<img src="/api/images/yourimage.jpg?token=here-your-token"> 发送cookie。 fetch

完整的{credentials: 'omit'}示例：

MDN

现在，当您登录时，在您的网站中，webapp可以将凭据保存到localStorage和cookie中。例：

fetch

因此，您的webapp使用localStorage，就像您的智能手机应用程序一样。浏览器默认通过发送cookie获取所有静态内容（img，video，a href）。

在服务器端，您可以将cookie复制到授权标头（如果没有）。

Node.js + express示例：

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) {
...

我希望它对某人有帮助。