【发布时间】：2021-10-19 13:54:41
【问题描述】：
我正在尝试使用 angular 11 的 reddit api 在本地开发一个 Web 应用程序，并且我正在尝试使用以下链接中的说明获取身份验证令牌：Reddit OAuth2 docs
但是，我遇到了一些问题。
我已经设置了我的标头以包含服务中的常用方法，例如：
httpOptions = {
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, OPTIONS,POST, PUT",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization",
})
};
我设置了在服务中检索身份验证令牌的功能：
getRedditAuthToken() {
console.log("Auth token");
return this.http.get<any>(this.redditAuthUrl, this.httpOptions);
}
redditAuthUrl 使用从 reddit 的 oAuth 文档中获取的以下参数进行设置：
https://www.reddit.com/api/v1/authorize?client_id=CLIENT_ID&response_type=TYPE&
state=RANDOM_STRING&redirect_uri=URI&duration=DURATION&scope=SCOPE_STRING
最后，组件正在检索服务：
getRedditAuthToken(): void {
this.redditService.getRedditAuthToken().subscribe((data) => {
console.log(data);
});
}
我在尝试访问身份验证令牌（在网络检查器上找到）时遇到了以下错误：
Access to XMLHttpRequest at 'https://www.reddit.com/api/v1/authorize.compact?client_id=<client_id>&response_type=code&state=<random_string>&redirect_uri=http://localhost:4200/reddit&duration=temporary&scope=identity' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response
GET https://www.reddit.com/api/v1/authorize.compact?client_id=<client_id>&response_type=code&state=<random_string>&redirect_uri=http://localhost:4200/reddit&duration=temporary&scope=identity net::ERR_FAILED
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.reddit.com/api/v1/authorize.compact?cl…ost:4200/reddit&duration=temporary&scope=identity", ok: false, …}
我曾多次尝试解决方案，例如使用代理 json 文件启动 angular、修改 httpHeaders、测试其他 reddit oAuth 令牌检索（使用 post 方法），但我总是遇到相同的 CORS 问题。
【问题讨论】：
-
reddit 文档的链接无效。在 OAuth2 中，您必须将用户重定向到授权服务器，以便他们可以输入凭据，而不是向其发送 http GET。
-
这些标头应该在服务器的响应中，而不是在您网站的请求中。该访问错误告诉您服务器不允许使用
access-control-allow-origin标头。通常，如果您有帐户，则需要设置您的帐户以允许特定 URL 进行重定向。我没有 reddit 帐户，但我用 Auth0 做过类似的事情。 -
CORS 错误表明 reddit 服务器不允许您从 localhost:4200 获取数据。我不知道 redddit 如何处理这个问题，但我假设有一个开发者控制台，您可以在其中注册您的应用并允许从您的域访问。
-
您也可以尝试使用经过认证的实现来处理身份验证，我认为这比自己实现要好。你可以找到一些here。这些适用于 OIDC，但它们应该适用于 OAuth2。只需搜索“角度”。我过去使用过 Manfred Steyer 的实现，对我来说效果很好。
-
您可以尝试使用像 Postman 这样不关心 CORS 的应用。如果您仍然收到 CORS 错误，您将知道这是服务器问题（例如，您的域不被允许）。如果 CORS 错误消失，那么它就是您的 Web 应用程序（浏览器在站点级别强制执行 CORS）。但就像@tobiso 和我都说过的那样，听起来您需要在某个仪表板中注册您的域。