Angular 4中缺少CORS [英] CORS missing in Angular 4

问题描述

我在服务器上有一个应用程序，我非常确定在此应用程序中启用了CORS，因为我有AngularJs客户端（1.x），并且运行良好。

I have an application on the server, I am very sure that I have CORS enabled in this application since I have an AngularJs client (1.x) and it works perfectly.

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

but, now I'm migrating to Angular 4 and I get the following error.

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

我已阅读这里有很多问题，他们都说这是服务器端的问题，但是正如我说我的服务器运行良好并启用了CORS一样，我的问题专门在客户端中

I have read many questions here and they all say that it is a problem in server-side but as I said my server works well and has CORS enabled, my problem is specifically in the client

已编辑

我已在服务中尝试过此操作。

I have tried this in my 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()))
}

新编辑

似乎还不清楚我有一个角度应用程序1.x与该新应用程序在角度4中的同一服务器上运行，后端配置良好，因为其他应用程序角度1正常工作并且在工作之前，我必须在客户端中更改某些参数。我需要知道如何在角度4中进行相同的操作

it seems that it has not yet been clear I have an angular application 1.x running on the same server as this new application in angular 4, THE BACKEND HAS CORS WELL CONFIGURED, IT IS BECAUSE THE OTHER APPLICATION ANGULAR 1 WORKS AND BEFORE WORKING I HAD TO CHANGE SOME PARAMETERS IN THE CLIENT I need to know how to do the same in angular 4

推荐答案

React也有同样的问题，并且可以通过添加 https://cors-anywhere.herokuapp.com/ 来解决。

Was having the same issue with React, and was able to solve it by adding the https://cors-anywhere.herokuapp.com/. Just try if it works for you as well.

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

这篇关于Angular 4中缺少CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！