关于javascript：Angular 4中缺少CORS


CORS missing in Angular 4

本问题已经有最佳答案，请猛点这里访问。

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

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

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ||my-url||. (Reason: CORS header
‘Access-Control-Allow-Origin’ missing)

我在这里读了很多问题，他们都说这是服务器端的问题，但正如我说我的服务器工作正常并启用了CORS，我的问题特别在客户端

EDITED

我在服务中试过这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 {
    const options = this.createAuthorizationHeader();
    return this._httpService.get(this.WEB_API_URL, options)
    .map((response: Response) => console.log(response.json()))
}

新编辑

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

相关讨论

与React有同样的问题，并且能够通过添加https://cors-anywhere.herokuapp.com/来解决它。试试它是否也适合你。

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

从angular-cli使用Proxy to backend

为什么？

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

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

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

但真正妥善的解决方案是在angular-cli中使用内置的后端代理。

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

相关讨论

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

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

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

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

相关讨论