使用oidc-client与ADFS反应SPA的CORS错误

Question

在这里，尝试使用oidc-client和redux-oidc进行授权代码流时，在我的React应用程序中，会尝试使用ADFS实例作为授权服务器。我的问题是，在.../adfs/oauth2/token图这里中，我无法在SignInCallback (可视化的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"

Answer 1

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

在ADFS 2019中，有一些方法可以定制行为。

如果这对您不起作用，那么另一个选项是使用前端API的后端为您代理某些请求。还请注意，无论如何，在2021年，SPA推荐采用这种方法。