CORS missing in Angular 4 [duplicate]

问题

This question already has answers here:

Why does my JavaScript code get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not? (45 answers)

Closed 2 years ago.

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.

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

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

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

EDITED

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

NEW EDIT

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

回答1:

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/ + Your API URL

回答2:

Use Proxy to Backend from angular-cli

Why?

Adding those headers to your request doesn't help because these headers are supposed to be set by a server.

This is a security restriction built-in to your browser. When you make a http request to url which is on different domain than your application, browser first fires the OPTIONS request. In the response it checks these security headers. Only after they are sent it will send the original request (GET in your case).

You could either modify your server to send these headers or use cors proxy server.

But really proper solution to this is to use built-in Proxy to Backend in angular-cli.

You basically define the route which will be redirected to your API and then you make requests to relative url (like /api). Therefore no CORS restriction applies.

回答3:

add this to your request options:

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

and you don't need to set all of those CORs headers, they aren't doing anything, those are request headers, cors headers need to be set in your response headers.

side note: I've run into an issue a few times with reusing request options in angular 2. It seems you either need to set them at the http level or you need to recreate the headers every single time. Try just returning a new RequestOptions object every time instead of attempting to reuse it, or use an http interceptor or extend your httpservice / request options to set the http requestoptions globally.

来源：https://stackoverflow.com/questions/47252098/cors-missing-in-angular-4