如何添加' ?token=..` `当取回API得到302时重定向URL ?

Question

作为标题。我对这个话题很陌生，所以我将用这个例子来描述我想要达到的目标:

1. 我正在浏览一个Git-pages网站，那里有一些图像。当我点击这些图片时，我发现URL被附加了?token=DSKLFJOS....
2. 现在，如果我只复制没有这个令牌的URL，那么我将得到404作为响应。我发现404实际上是第二个请求。第一个请求是302，可以从响应中找到令牌。
3. 所以，我想要实现的是，我想使用fetchAPI尝试从302获得令牌，并将其附加到(重定向)请求?token=...的URL，以便第二个请求将获得200。

我的想法:也许这可以在我更多地了解fetchAPI的credentials和/或redirect选项后实现。但我不确定!

这是当前的代码，将失败的404(在第二次请求)。这不是我写的，所以我看不懂。(很抱歉，我不能发布完整的代码，因为它是一个私人内容)

fetch(filePath)
.then(response => response.arrayBuffer())
.then(arrayBuffer => callback(arrayBuffer, arrayBuffer.byteLength));

谢谢你的阅读。如果我的任何想法是不正确的，请随时纠正我，并将其作为答案发布!

Answer 1

也许这样的东西会起作用。基本上，你只是检查状态代码，如果它是302，你将重新获取响应与令牌，然后如果状态仍然大于300你返回null，如果不是你返回JSON响应。

async function getImage(url, token) {
let response = await fetch(url);

// You can also say if (response.status >= 300 && response.status < 400)
if (response.status === 302) {
response = await fetch(`${url}?token=${token}`);
}

if (response.status >= 300) {
return null;
}

return response.json();
}

标题的位置应该是这样的:

async function getImage(url) {
let response = await fetch(url);

if (response.status === 302) {
response = await fetch(`${url}?token=${response.headers.get('location')}`);
}

return response.json();
}

我删除了第二个if只是为了简化答案，只是考虑到请求会成功。

Answer 2

您可以使用fetch(originalResponse.url + token)重新请求新的URL。

响应接口的url只读属性包含响应的URL。url属性的值将是任何重定向后获得的最终URL。

从https://developer.mozilla.org/en-US/docs/Web/API/Response/url

下面是一个例子:

let token = "abcdef"
fetch("page-that-redirects.com/")
.then(response => {
if (response.status === 404) {
fetch(response.url + "?token=" + token)
.then(/* do something */)
}
})
// Or with async/await:
let response = await fetch("page-that-redirects.com/")
if (response.status === 404) {
let newResponse = await fetch(response.url + "?token=" + token)
/* do something */
}