CORS missing in Angular 4

Question

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

Well in that case it would be helpful if you can provide some running example — Naman Kheterpal, Nov 12 '17 at 18:03
you don't set CORs headers on the client... you set them on the server... setting a CORs header on the client would kind of defeat the entire purpose of CORs — bryan60, Nov 12 '17 at 18:10
but the server has it enabled, I have another client in Angular 1.x and it works perfect — airan narvaez, Nov 12 '17 at 18:11
I'm gona guess your angular 1 client is coming from the same domain as your server and this new client is on a different domain, and your server side CORs was never configured correctly. You should post that code if you're having CORs issues, since cors headers set on a client are totally meaningless. — bryan60, Nov 12 '17 at 18:14
both clients are on the same server, and web-api on another server. in the angular 1.x client I had to enable cors to work — airan narvaez, Nov 12 '17 at 18:17
no, you needed to set withCredentials to true, which you also have to do in angular 2 — bryan60, Nov 12 '17 at 18:18
It's pretty clear that your server does **not** have CORS **response** headers enabled. What host and port is your client running on? What host and port is `WEB_API_URL` pointing to? You should be able to inspect the request / response in your browser's *Network* console; what do the response headers look like? — Phil, Nov 12 '17 at 23:59
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 — airan narvaez, Nov 14 '17 at 02:50

score 1 · Answer 1 · answered Nov 12 '17 at 18:16

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

answered Nov 12 '17 at 18:16

Dhaval Jardosh

7,151
5
27
69

score 0 · Answer 2 · answered Nov 12 '17 at 23:48

0

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.

answered Nov 12 '17 at 23:48

Martin Nuc

5,604
2
42
48

Won't this only help during development? Presumably, OP will want it to work in production as well – Phil Nov 13 '17 at 00:02
This will help only during development. In production you should either setup nginx with routing /api to your server or whitelist your domain on the server. – Martin Nuc Nov 13 '17 at 00:04
this works well, unfortunately I had to do this to continue developing, but there must be something better than this – airan narvaez Nov 14 '17 at 02:49
open developer console in the chrome and see if there are CORS headers in the server response. – Martin Nuc Nov 14 '17 at 06:32

bryan60 · Answer 3 · 2017-11-12T18:25:14.973

-1

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.

edited Nov 12 '17 at 18:25

answered Nov 12 '17 at 18:19

bryan60

28,215
4
48
65

Given [`withCredentials`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) primarily deals with cookies and OP has made no indication of such a requirement, what makes you think this is the answer? – Phil Nov 12 '17 at 23:56
More information here ~ https://www.html5rocks.com/en/tutorials/cors/#toc-withcredentials – Phil Nov 13 '17 at 00:04

CORS missing in Angular 4

3 Answers3

Linked