Question

我有一个React应用（站点A），一个快速api（站点B）和一个第三方oauth服务（站点C）。

在站点A中，我需要用户登录到站点C，以便他们可以利用其资源。由于我不希望客户端（A）中的客户端ID /秘密，我将站点B设置为A和C之间的代理。

A: localhost:3000
B: localhost:3001
C: example.com

我的"proxy": "http://localhost/3001"中有一个package.json设置。因此，我可以在网站A中执行fetch('/api/foo')之类的操作，它将成功访问网站B。

这就是我的困惑所在。我已经阅读了以前有关CORS的SO帖子，但是他们只谈论站点A到B，他们不考虑站点C（他们不拥有的第三方API）。

在站点B中，我正在使用passport和passport-bnet来处理oauth。如果我启动站点B并访问oauth端点，它将成功访问站点C并进行身份验证并带回我需要的令牌。

但，如果我在站点A中做类似的事情：

function Foo(() => {
  return <button onClick={handleOnClick}>Click Me</button>

  function handleOnClick() {
    // doesn't work
    fetch('/api/auth').then(...)
  }
});

然后我会收到错误提示。

从CORS策略阻止从原点“空”获取“ https://us.battle.net/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fauth%2Fbnet%2Fcallback&scope=wow.profile&client_id= .............”（从“ http://localhost:3001/auth/bnet”重定向）的访问权限：所请求的资源上没有“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

如果我将<button>的{{1}}更改为锚标记，则它会起作用：

onClick

我在这里想念什么？同样，我已经阅读了SO上现有的主要cors答案，但是它们仅利用两个站点（您同时拥有两个站点）。在这种情况下，我只拥有3个中的2个。

_注意，站点C确实支持http和https，并且还支持本地主机重定向（由B-> C证明可以正常工作）。

表示为站点A和站点C

0 个答案: