angular-oauth2-oidc实现误抛CORS错误，URL参数遭混淆求助

问题根源 #

你遇到的核心问题是错误地将带查询参数的完整授权URL作为身份提供者的基础地址传给了angular-oauth2-oidc库。loadDiscoveryDocumentAndTryLogin方法会自动在配置的基础URL后追加标准OpenID Connect发现文档路径/.well-known/openid-configuration，这就导致库把路径错误拼到了授权URL的查询参数后面，生成了无效的请求地址，进而触发CORS错误。

解决方案 #

1. 修正配置的基础地址

将authCodeFlowConfig中的身份提供者地址改为不带任何查询参数的基础域名/根路径，所有参数（包括自定义的p=my_policy）都通过配置字段传递，而非手动拼到URL里。

示例修正后的配置：

import { AuthConfig, NullValidationHandler } from 'angular-oauth2-oidc';

// 正确的配置结构
const authCodeFlowConfig: AuthConfig = {
  // 身份提供者的基础URL，不带查询参数
  issuer: 'https://some-identity-provider.com',
  clientId: 'xxxxxx',
  redirectUri: window.location.origin,
  scope: 'openid profile',
  responseType: 'id_token',
  // 自定义参数（比如你的policy）放在customParams里
  customParams: {
    p: 'my_policy'
  },
  tokenValidationHandler: new NullValidationHandler(),
  useSilentRefresh: true,
  storage: localStorage
};

2. 保持初始化代码逻辑

你的初始化代码无需大改，修正配置后即可正常调用：

this.oauthService.configure(authCodeFlowConfig);
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
  console.log('Discovery document fetched successfully');
});

3. 特殊情况：身份提供者不支持标准发现文档

如果你的身份提供者没有提供标准的/.well-known/openid-configuration发现文档，直接手动配置所有必要端点，跳过发现文档加载步骤：

const authCodeFlowConfig: AuthConfig = {
  clientId: 'xxxxxx',
  redirectUri: window.location.origin,
  scope: 'openid profile',
  responseType: 'id_token',
  customParams: {
    p: 'my_policy'
  },
  // 手动指定授权端点URL
  loginUrl: 'https://some-identity-provider.com/OAuth/Authorize',
  // 根据需要添加其他端点，比如令牌端点、用户信息端点等
  tokenEndpoint: 'https://some-identity-provider.com/OAuth/Token',
  userinfoEndpoint: 'https://some-identity-provider.com/OAuth/UserInfo',
  tokenValidationHandler: new NullValidationHandler(),
  useSilentRefresh: true,
  storage: localStorage
};

// 改用tryLogin，跳过发现文档加载
this.oauthService.configure(authCodeFlowConfig);
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.tryLogin().then(() => {
  console.log('Login attempt completed');
});

关键说明 #

• 库会自动根据配置的参数拼接正确的授权URL，无需手动拼接完整URL。
• 只有当你直接在浏览器访问授权URL时，手动拼接才有效，但库的初始化逻辑依赖的是身份提供者的基础地址，而非完整的授权端点。

内容的提问来源于stack exchange，提问作者dave0688