如何在OIDC配置变量中添加Access-Control-Allow-Origin请求头

首先需要明确一个常见认知误区：Access-Control-Allow-Origin 是身份提供商（Identity Provider, IDP）返回的响应头，不由前端主动作为请求头设置，前端仅需要保证OIDC请求来源合法，同时在身份提供商侧配置你的SPA域名作为允许的跨域源即可。如果需要给OIDC客户端的请求添加其他自定义请求头，可按以下步骤修改配置：

修改OIDC基础配置 #

在原有authConfig中添加customHeaders字段，即可给所有OIDC请求统一配置自定义请求头：

export const authConfig: AuthConfig = {
  // 身份提供商地址
  issuer: 'https://steyer-identity-server.azurewebsites.net/identity',

  // 登录后跳转回SPA的地址
  redirectUri: window.location.origin + '/index.html',

  // SPA在身份提供商处注册的客户端ID
  clientId: 'spa-demo',

  // 客户端请求的权限范围，前三个为OIDC标准定义，第四个为业务自定义范围
  scope: 'openid profile email voucher',

  // 新增：统一配置所有OIDC请求携带的自定义头
  customHeaders: {
    // 注意：不要手动添加Access-Control-Allow-Origin，浏览器会自动携带Origin请求头
    '自定义头名称': '自定义头值'
  },

  // 可选配置：适配部分IDP的CORS规则，避免跨域报错
  requireHttps: true,
  disableAtHashCheck: false
}

调整组件初始化逻辑 #

如果需要给特定OIDC请求（比如加载发现文档、刷新Token）单独配置请求头，可调整初始化逻辑如下：

@Component({
    selector: 'flight-app',
    templateUrl: './app.component.html'
})
export class AppComponent {

    constructor(private oauthService: OAuthService) {
      this.configure();
    }

    private configure() {
      this.oauthService.configure(authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
      
      // 加载发现文档时单独配置请求头
      this.oauthService.loadDiscoveryDocumentAndTryLogin({
        customHeaders: {
          'X-Request-From': 'Angular-SPA'
        }
      }).then(status => {
        if (status) {
          console.log('OIDC认证初始化成功');
        }
      }).catch(err => {
        console.error('OIDC初始化失败，请检查IDP跨域配置', err);
      });
    }
}

注意事项 #

• 所有Access-Control-Allow-*响应头都需要在身份提供商侧配置，将你的SPA域名添加到IDP的允许跨域源列表，才能从根本上解决跨域报错
• 不要在前端手动设置Access-Control-Allow-Origin请求头，手动设置反而会触发CORS预检失败
• 如果使用代理服务转发OIDC请求，需要在代理层配置对应的CORS响应头规则

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