在带有 ADFS 的 React SPA 中使用 oidc-client 出现 CORS 错误答案

【问题标题】：CORS Error using oidc-client in React SPA with ADFS在带有 ADFS 的 React SPA 中使用 oidc-client 出现 CORS 错误
【发布时间】：2021-09-16 15:46:37
【问题描述】：

在这里不知所措，尝试在我的 React 应用程序中使用 oidc-client 和 redux-oidc 对作为授权服务器的 ADFS 实例进行授权代码流。我的问题是我未能在我的SignInCallback 期间使用授权码发布到.../adfs/oauth2/token，在图表here 的视觉部分D) 中。每次尝试都会导致我的浏览器中出现 CORS 错误，在 Chrome 和 Firefox 上尝试过，没有预检检查，我可以在响应中看到 id_token、access_token 和 refresh_token。

我可以从邮递员发布到该端点，而不会出现 CORS 错误。我发现的唯一解决方法是使用浏览器扩展来允许 CORS，但这不适合生产。为什么我的浏览器会这样？

我的配置：

import { createUserManager } from 'redux-oidc';

export const config = {
  authority: process.env.REACT_APP_OIDC_AUTHORITY,
  client_id: process.env.REACT_APP_OIDC_CLIENT_ID,
  redirect_uri: process.env.REACT_APP_OIDC_REDIRECT_URI,
  response_type: 'code',
  scope: 'openid profile email',
  automaticSilentRenew: true,
  loadUserInfo: false
};

const userManager = createUserManager(config);
export default userManager;

我的登录回调：

 /* Imports above */
const SignInCallback = () => {
  const history = useHistory();

  const successCallback = user => {
    console.log(user);
    history.push('/DashboardDefault');
  };

  const errorCallback = error => {
    console.log(error);
    history.push('/LandingPage');
  };

  return (
    <CallbackComponent
      userManager={userManager}
      successCallback={successCallback}
      errorCallback={errorCallback}>
      <div className="text-center">Redirecting...</div>
    </CallbackComponent>
  );
};

export default connect()(SignInCallback);

我的请求正文：

client_id   "XXXXXXXXXX"
code    "XXXXXXX"
redirect_uri    "https://localhost:3001/callback"
code_verifier   "XXXXXXXXXX"
grant_type  "authorization_code"

我的回复正文：

access_token    "XXXXXXXXX"
token_type  "bearer"
expires_in  3600
resource    "urn:microsoft:userinfo"
refresh_token   "XXXXXXXXX"
refresh_token_expires_in    21192
scope   "openid"
id_token    "XXXXXXXXX"

【问题讨论】：

在授权代码流中，它是发布到令牌端点的服务器。图中的“客户端”是指服务器应用程序，而不是用户代理。我怀疑你是否会得到 cors 的回复。

标签： javascript reactjs openid-connect adfs

【解决方案1】：

我怀疑您在响应中缺少标准 CORS 标头 - 即 Access-Control-Allow-Origin，因此，由于响应不在您的 SPA 域中，浏览器无法读取它。

在ADFS 2019 中有一些方法可以自定义行为。

如果这对您不起作用，那么另一种选择是使用Back End for Front End API 为您代理某些请求。另请注意，无论如何都建议在 2021 年将这种方法用于 SPA。

【讨论】：

是的，这似乎是解决方案。前端的后端似乎只会带来更多的复杂性。我将参考 ADFS 文档并对标题进行排序。谢谢。