Angular：HTTP GET 请求 - OPTIONS 405（不允许的方法）答案

【问题标题】：Angular: HTTP GET request - OPTIONS 405 (Method Not Allowed)Angular：HTTP GET 请求 - OPTIONS 405（不允许的方法）
【发布时间】：2019-05-15 20:11:59
【问题描述】：

我正在尝试向我的 API 发出 HTTP GET 请求，它返回 OPTIONS 405 (Method Not Allowed) 和

从源访问“apiurl”处的 XMLHttpRequest “http://localhost:4200”已被 CORS 策略阻止：响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。

下面是我的代码：

 const header = new HttpHeaders();
 const request_header = header.append('Authorization', this.token.toString());

 console.log(request_header.get('Authorization'));

 this.urlList = buildUrl('myurl/', {path: 'mypath'});

 return this.http.get(this.urlList,{headers: request_header} );

我尝试在 Postman、C# 控制台应用程序和 ASP.NET WebForms 中做同样的事情，它运行良好，但在 Angular 中我得到了上面提到的错误。我也在 TypeScript 中对我的登录有一个 HTTP GET 请求，它完美运行。

**注意：我无法访问后端，但基于 C# 和 Postman 可以正常工作。

更新： 谢谢你们，只是为了让你们知道我最终使用 Flask 和 angular 来提出请求，它很棒。

【问题讨论】：

这与角度无关，这是拨打电话时的身份验证问题。您应该尝试确保您通过服务所需的正确请求标头的身份验证令牌或 cookie 值。
我已经尝试过一千种不同的方法和组合，但似乎没有一个有效。在 Angular 中是否有不同的请求方式？
你见过this answer about headers being immutable?一年前我也遇到过类似的问题。
我通常这样做：httpOptions: any = { headers: new HttpHeaders({ Authorization:' my_key_for_authentication' }) }; 在服务中，我获取标头并在发出请求时传递给 HttpClient：const headers = this.httpOptions.headers; return this.httpClient .get(${this.baseUrl}/muurl, { headers, params })
How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?的可能重复

标签： angular typescript api http cors

【解决方案1】：

这是一个 CORS 问题。托管 REST API 的网络服务器与托管 Angular 静态文件的网络服务器运行在不同的域上。

确保您没有在 localhost 上运行 Angular 并在单独的域或类似的东西上运行 REST API。理想情况下，您应该从同一个域运行两者。

配置 REST API 托管服务器以允许来自 Angular 托管服务器 (localhost) 的 CORS。

【讨论】：

我的 API 在 172.25.x.x 上，我也在 172.25.x.x 上。而且我的登录请求以这种方式工作，只是这个没有（但它同样适用于谷歌浏览器上的网络表单）。
@K.Anye 然后使用 172.25.x.x:4200 而不是 localhost:4200 访问您的 Angular UI
@K.Anye 运行在一个域上的 javascript 不能在另一个域上进行 HTTP 调用。在您的问题中，我看到您正在使用 localhost:4200 访问 UI。要么确保使用 localhost 访问 API 和 UI，要么使用相同的 IP 访问两者。如果您不能这样做，请将您的服务器配置为允许来自 IP 或 localhost 的 CORS，无论您使用什么来访问 UI。请阅读 CORS
非常感谢！会的！

【解决方案2】：

邮递员在这里获取资源不会有任何问题。

但是由于您来自 Angular 服务器的请求出现跨域错误，您需要使用 API 设置后端，在 Access-Control-Allow-Origin 标头中设置您的角度服务器地址，以便您访问请求的资源。

如果您将 Access-Control-Allow-Origin 标头设置为 *，它将允许任何服务器获取资源，但这并不安全，因为任何人都可以在未经您许可的情况下获取您的资源。

【讨论】：