不同的行为CURL vs http.get - CORS

Question

所以，我真的很生气：

命令行：

$ curl -X GET "cloudant/url" --header "Authorization: Basic YWRtaW46cGFzcw==" --header "Content-Type: application/x-www-form-urlencoded; charset=UTF-8"
{ "response": "OK" }

使用Angular 2 http模块（在可注入服务中）：

import {Http, Response, Headers} from '@angular/http';

let headers = new Headers();
headers.append("Authorization", "Basic YWRtaW46cGFzcw=="); 
headers.append("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

this.http.get("cloudant/url", { method: "GET", headers: headers });

  

405（不允许的方法）

     

预检的响应包含无效的HTTP状态代码405

我不应该也不需要关心服务器配置。我想向服务器发出GET请求，任何CORS客户端安全问题都不是我的事。

我可以让Http在这方面表现得像个卷曲吗？

Answer 1

这正是CORS的目的。除非服务器设置为专门允许，否则它会阻止您从浏览器发出跨源请求。我理解你的沮丧，但没有解决方法。

您错误地认为CORS只是客户端安全问题。它需要一个配置良好的服务器与精心设计的前端应用程序，以构建非常好的东西。并且应关心服务器配置，因为它确保您能够提供响应迅速且前卫的前端体验。如果世界上任何网站都可以开始使用这个API，那么后端会有各种额外的安全性和性能问题。

Answer 2

默认情况下，浏览器不允许从加载站点的域以外的任何域发出请求。 CORS 机制最终与浏览器相关，而不是保护端点的方法。它保证只有您允许的源域才能从浏览器中的特定页面发出请求。

CORS 是 浏览器 的一项安全功能，这就是为什么您的请求只能使用 cURL。

你的前端是用Angular构建的，运行在浏览器中，所以浏览器申请CORS 保护。

CORS 机制基于 HTTP 标头（服务器需要放置它们的响应）工作。最重要的是：

• Access-Control-Allow-Origin：指定可以访问您域中资源的外部域（源）。
• Access-Control-Allow-Methods：在我们想要访问不同域的情况下，让我们只引用一些 HTTP 方法，但只引用特定的 < em>HTTP 方法。如果您要启用 example.com 来调用某个端点，则可以使用它，但仅限于 HTTP GET，例如。
• Access-Control-Allow-Headers：为您可以在特定请求中使用的标头添加限制。

Answer 3

我改为使用fetch API：

  return fetch(url, { method: "GET" }).then(this.extractData).catch(this.handleError);

...

  private extractData(res: Response): Promise<CloudantCheckStatisticsRowMapping> {
    let p = res.json();
    return p.then(function(body: any) {
        console.log("Found " + body.total_rows + " records; last one is the one we need.");
        return body.rows[0].doc;
    });
  }

似乎它没有受到CORS的困扰。