Javascript CORS在Angular 4中丢失_Javascript_Angular_Typescript_Cors

Javascript CORS在Angular 4中丢失

javascript angular typescript cors

Javascript CORS在Angular 4中丢失,javascript,angular,typescript,cors,Javascript,Angular,Typescript,Cors,我在服务器上有一个应用程序，我非常确定我在这个应用程序中启用了CORS，因为我有一个AngularJs客户端（1.x），它工作得非常好但是，现在我迁移到Angular 4，我得到以下错误跨源请求被阻止：同源策略不允许读取位于| |我的url | |的远程资源。（原因：CORS头） “访问控制允许来源”缺失）我在这里读了很多问题，他们都说这是服务器端的问题，但正如我所说的，我的服务器工作良好，并且启用了CORS，我的问题特别是在客户端已编辑我已经在我的服务中试过了 createAutho

我在服务器上有一个应用程序，我非常确定我在这个应用程序中启用了CORS，因为我有一个AngularJs客户端（1.x），它工作得非常好

但是，现在我迁移到Angular 4，我得到以下错误

跨源请求被阻止：同源策略不允许读取位于| |我的url | |的远程资源。（原因：CORS头） “访问控制允许来源”缺失）

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

已编辑

我已经在我的服务中试过了

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()))
}

createAuthorizationHeader（）：请求选项{
//只是检查一下。使用lodash时，选项为空
if（isNull（此._选项））{
常量头=新头（）；
headers.append（'Access-Control-Allow-Origin'，'*'）；
headers.append（'Access-Control-Allow-headers'，'X-request-With，content-type'）；
append（'Content-Type'，'application/json；charset=utf-8'）；
this.\u options=newrequestoptions（{headers:headers}）；
}
返回此选项。\u选项；
}
getStudies（）：可观察的{
const options=this.createAuthorizationHeader（）；
返回此。httpService.get（this.WEB\u API\u URL，选项）
.map（（response:response）=>console.log（response.json（））
}

新编辑

似乎还不清楚我有一个angular应用程序1.x与angular 4中的这个新应用程序运行在同一台服务器上，后端配置了CORS，这是因为ANGULAR 1的另一个应用程序可以工作，在工作之前，我必须更改客户端中的一些参数我需要知道如何在ANGULAR 4中执行相同的操作

与React有相同的问题，并且能够通过添加

https://cors-anywhere.herokuapp.com/

。如果它对你也有效，就试试看

https://cors-anywhere.herokuapp.com/

您的API URL

与React有相同的问题，可以通过添加

https://cors-anywhere.herokuapp.com/

。如果它对你也有效，就试试看

https://cors-anywhere.herokuapp.com/

您的API URL

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

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

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

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

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

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

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

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

使用from

为什么？

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

这是浏览器内置的安全限制。当您对与应用程序位于不同域的url发出http请求时，浏览器首先触发

选项

请求。在响应中，它检查这些安全头。只有在它们被发送后，它才会发送原始请求（在您的情况下）

您可以修改服务器以发送这些头，也可以使用cors代理服务器

但真正合适的解决方案是使用内置的
angular cli

您基本上定义了将重定向到API的路由，然后向相对url发出请求（如

/API

）。因此，不适用CORS限制。

从