尝试重定向到Azure AD进行身份验证时遇到CORS策略问题

Question

我收到此错误：

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize/.well-known/openid-configuration' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当尝试重定向到Azure进行登录时。

这是服务：

export class AuthService {
private _userManager: UserManager;

constructor(private http: HttpClient) {
    const config = {
        authority: Constants.stsAuthority,
        client_id: Constants.clientId,
        redirect_uri: `${Constants.clientRoot}assets/oidc-login-redirect.html`,
        scope: 'openid profile',
        response_type: 'id_token token',
        post_logout_redirect_uri: `${Constants.clientRoot}?postLogout=true`,
        userStore: new WebStorageStateStore({ store: window.localStorage })
      };
    this._userManager = new UserManager(config)
 }

 login(): Promise<any>{
     return this._userManager.signinRedirect();
 }

}

我确定我已经正确注册了localhost网址。但是，我遇到了这个错误。到目前为止，我还没有任何有关此问题的文档。

感谢您的帮助

Answer 1

https://login.microsoftonline.com/ {tenantId} /oauth2/v2.0/authorize/。众所周知/ openid配置不是有效的URL。

可能您的权限配置错误。 它应该只是https://login.microsoftonline.com/tenant-id。

Answer 2

我很久以前也有过类似的经历。如果我没记错的话，您需要在app.modules.ts中导入HTTP模块。查看此链接https://angular.io/guide/http 否则，您请求的服务器需要在web.config文件中使用此自定义标头标签以允许CORS（跨源资源共享）

<system.webServer>
   <httpProtocol>
     <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, 
        OPTIONS" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

希望这会有所帮助。