Angular OAuth2认证配置proxy.conf.json仍触发CORS错误问题求助

问题原因 #

• OAuth2授权码流程调用方式错误：授权码模式的/authorize端点禁止使用AJAX异步请求，这个接口的设计逻辑就是要求浏览器整页跳转，让用户在授权服务的官方页面完成登录、授权操作，之后才会跳转回你配置的redirect_uri带回授权码。你用http.get发异步请求，就算没有CORS问题，也无法让用户完成交互，不符合OAuth2的标准流程。
• 你看到的CORS报错和proxy配置无关，proxy本身是生效的：请求经过代理转发到外部授权服务后，授权服务返回302重定向到自身的登录页，AJAX会自动跟随重定向请求，但是重定向的目标地址（外部服务的登录页）没有配置CORS允许跨域访问，所以被浏览器拦截了，修改proxy配置无法解决这个问题。

修复方案 #

1. 把auth方法里的http.get调用替换成浏览器整页跳转即可：

auth(clientId: string, secredId: string) {
    const url = this.authUrl + '?client_id=' + clientId + '&response_type=code&scope=' + this.scope + '&state=' + this.state + '&redirect_uri=' + this.redirect_uri
    // 替换原有http.get调用
    window.location.href = url
}

2. 用户在授权服务页面完成操作后，会自动跳转回你配置的http://localhost:4200地址，同时携带code参数，你在页面初始化逻辑里直接提取路由参数中的code，再调用你配置的/tokenUrl代理接口兑换access_token即可，这部分的AJAX请求不会触发CORS问题。

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