Angular 4中缺少CORS [重复]

Question

我在服务器上有一个应用程序，我很确定我在这个应用程序中启用了 CORS，因为我有一个 AngularJs 客户端 (1.x) 并且它运行良好。

但是，现在我正在迁移到 Angular 4，但出现以下错误。

跨域请求被阻止：同源策略不允许读取位于 ||my-url|| 的远程资源。 （原因：CORS 标头 'Access-Control-Allow-Origin' 缺失）

我在这里阅读了很多问题，他们都说这是服务器端的问题，但正如我所说，我的服务器运行良好并且启用了 CORS，我的问题特别出在客户端

已编辑

我已经在我的 service.ts 中尝试过这个

createAuthorizationHeader(): RequestOptions {
    // Just checking is this._options is null using lodash
    if (isNull(this._options)) {
      const headers = new Headers();
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
      headers.append('Content-Type', 'application/json; charset=utf-8');
      this._options = new RequestOptions({headers: headers});
    }
    return this._options;
}

getStudies(): Observable<any> { 
    const options = this.createAuthorizationHeader();
    return this._httpService.get(this.WEB_API_URL, options)
    .map((response: Response) => console.log(response.json()))
}

新编辑

似乎还不清楚 我有一个 Angular 应用程序 1.x 在与 Angular 4 中的这个新应用程序相同的服务器上运行，后端的 CORS 配置良好，这是因为另一个应用程序 ANGULAR 1 工作和工作之前，我必须在客户端更改一些参数我需要知道如何在角度 4 中做同样的事情

Answer 1

在使用 React 时遇到了同样的问题，并且能够通过添加 https://cors-anywhere.herokuapp.com/ 来解决它。试试看它是否也适合你。

https://cors-anywhere.herokuapp.com/ + Your API URL

Answer 2

将此添加到您的请求选项中：

this._options = new RequestOptions({headers: headers, withCredentials: true});

而且您不需要设置所有这些 COR 标头，它们没有做任何事情，这些是请求标头，需要在您的响应标头中设置 cors 标头。

旁注：我在 Angular 2 中重用请求选项时遇到过几次问题。看来您要么需要在 http 级别设置它们，要么每次都需要重新创建标头。尝试每次只返回一个新的 RequestOptions 对象，而不是尝试重用它，或使用 http 拦截器或扩展您的 httpservice / request 选项以全局设置 http requestoptions。

Answer 3

使用来自angular-cli的Proxy to Backend

为什么？

将这些标头添加到您的请求中没有帮助，因为这些标头应该由服务器设置。

这是您的浏览器内置的安全限制。当您向与您的应用程序位于不同域的 url 发出 http 请求时，浏览器首先会触发 OPTIONS 请求。在响应中，它会检查这些安全标头。只有在它们被发送后，它才会发送原始请求（在您的情况下为 GET）。

您可以修改您的服务器以发送这些标头或使用 cors 代理服务器。

但真正正确的解决方案是在angular-cli 中使用内置的Proxy to Backend。

您基本上定义了将被重定向到您的 API 的路由，然后您向相对 url 发出请求（例如 /api）。因此不适用 CORS 限制。