Fetch API 重定向不符合我的预期

Question

各位堆栈溢出者，您好！我正在使用 battle.net api.

构建一个小应用程序

我正在尝试使用 Oauth 和 fetch API 向 api 进行身份验证，但它似乎无法满足我的要求！

所以这是我的代码```

const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

它应该将我重定向回这里 https://localhost:3000/?code="code"&state="state" 代码是实际的授权代码。

但是当我尝试调用该端点时，它不会将我重定向回来。从开发人员控制台我可以看到它确实在此处调用 https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code 给出状态 302。然后将我重定向到这个 url:

https://eu.battle.net/login/en/?ref=https://eu.battle.net/oauth/authorize?client_id%3clientId%26scope%3Dwow.profile%26state%3Dsdagdf324asdas%26redirect_uri%3Dhttps://localhost:3000%26response_type%3Dcode&app=oauth 给出状态 200。

但不返回本地主机。但是，如果我将 authUrl 直接粘贴到浏览器中，它确实会按预期工作。

我在反应中做错了什么？

抱歉，如果我不清楚或混淆。如果我遗漏了任何重要的东西，请问我，我会提供！如果有人可以尝试帮助我，将不胜感激！提前致谢！

Answer 1

所以你的问题在这里，看起来你没有正确传递变量，你不能只在 javascript 中的字符串之间包含变量，你需要使用带反引号的字符串插值。

像这样：

  `https://eu.battle.net/oauth/authorize?client_id=${clientid}&scope=wow.profile&state=${state}&redirect_uri=https://localhost:3000/&response_type=code`;
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

或者，您可以使用字符串连接。

const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=" + clientid + "&scope=wow.profile&state=" + state + "&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

Answer 2

OAuth2 authentication_code 流程大致如下：

您将用户发送给授权url。
用户使用表单登录
用户被重定向回来。

如果用户已经登录并且有 cookie，则可以跳过 2。

此过程永远不会与提取一起工作，因为它的设计目的是不这样做。即使当您手动转到时重定向对您有效，这只是因为直接转到 url 的安全模型与使用 fetch 不同。

所以你不能用 fetch 来做到这一点。相反，使用 document.location.

将用户发送到此 url

Fetch API 重定向不符合我的预期

Fetch API redirect doesn't work as i intended

redirect

oauth

fetch

reactjs

battlenet-api