Okta Api 从来源 'http://localhost:4200' 获取“okta-api-url”的访问已被 CORS 策略阻止

Question

尝试访问 OKTA 时出现以下错误 api 您能否在 Angular

中提出可能的解决方案

 Access to fetch at 'https://dev-99322141.okta.com/api/v1/authn' from origin
 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't 
pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested 
resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.

config/my-app-config.ts

export default {
    oidc: {
        clientId: '<client id which is get from OKTA API>',
        issuer: 'https://dev-<numbers>.okta.com/oauth2/default',
        redirectUri: 'http://localhost:4200/login/callback',
        scopes: ['openid', 'profile', 'email']
    }
}

login.component.ts

export class LoginComponent implements OnInit {

  oktaSignIn: any;

  constructor(private oktaAuthService: OktaAuthService) { 

    this.oktaSignIn = new OktaSignIn({
      logo:'assets/images/logo.png',
      baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0],
      clientId: myAppConfig.oidc.clientId,
      redirectUri: myAppConfig.oidc.redirectUri,
      authParams: {
        pkce: true,
        issuer: myAppConfig.oidc.issuer,
        scopes: myAppConfig.oidc.scopes
      }
    });
  }

  ngOnInit(): void {
    this.oktaSignIn.remove(); // remove if any previous elements over there

    this.oktaSignIn.renderEl({
      el: '#okta-sign-in-widget'}, // this name shouldb e same as dive tag id in login.component.html
      (response) =>  {
        if(response.status === 'SUCCESS') {
          this.oktaAuthService.signInWithRedirect();
        }
      },
      (error) => {
        throw error;
      }
    );
  }
}

允许 cors 通过 http://localhost:4200

访问 Okta URL、https://dev-99322141.okta.com/api/v1/authn 的可能解决方案是什么

Answer 1

我的问题可以在关于 headers 或严格字体的 OKTA 配置中解决。 API 需要您未发送的 header 中的信息。或者您忘记发送了。

Okta Api 从来源 'http://localhost:4200' 获取“okta-api-url”的访问已被 CORS 策略阻止

Okta Api Access to fetch at "okta-api-url' from origin 'http://localhost:4200' has been blocked by CORS policy

cors

preflight

angular