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

Question

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

我可以 post 从 postman 到那个端点，没有 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"

Answer 1

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

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

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

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

CORS Error using oidc-client in React SPA with ADFS

javascript

adfs

reactjs

openid-connect