Angular 4 Headers not passing

Question

I have a REST-API to contact, it works on swagger. Now I try to call it with my Angular 4 app. I get the error:

  XMLHttpRequest cannot load 
  "baseURL"/company/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access

When I look at the call, I see that it doesn't pass any headers (also not the token), but I actually added them to my request in my Angular 4 code:

getCompanies(): Observable<Company[]> {
   let tokenobject =JSON.parse(sessionStorage.getItem('current_user'));
   let token = tokenobject.token;
   let headers = new Headers({ 'Access-Control-Allow-Origin' : 'http://localhost:4200','Authorization': token });
   let options = new RequestOptions({ headers: headers });
   return this.http.get(this.url + this.path, options)
          .map(this.extractData)
          .catch(this.handleError);
}

Is there something I forgot or did wrong?

score 0 · Answer 1 · answered Jul 05 '17 at 08:36

Its a CORS issue. You need to enable Cross Origin Requests on your API end if you are going to make cross origin requests.

Read more about CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS https://www.maxcdn.com/one/visual-glossary/cors/

Also read this thread about CORS issue with Angular JS: AngularJS CORS Issues

score 0 · Answer 2 · answered Jul 05 '17 at 08:37

CORS errors are server related. Here, you server isn't set to accept requests from localhost (it's written in the error). Either you allow all (*) when you develop, or you find the right Origin to accept.

Otherwise, your token should go, maybr you didn't see it because it's an OPTIONS request and not a GET one ? (OPTIONS requests are sent by the browser before other requests)

score 0 · Answer 3 · answered Jul 05 '17 at 08:43

0

For CORS, others have already pointed out you need to enable it on server.

For Headers, use Headers.append:

let headers = new Headers();
headers.append('Authorization', token );
let options = new RequestOptions({ headers: headers });

btw, for authorization header you might want to consider overriding angulars Http class in order to append Authorization header (if token exists, of course) to all requests so you don't have to add it manually to get, post, delete...

answered Jul 05 '17 at 08:43

dee zg

13,793
10
42
82

Okay thanks, but I don't want to turn off CORS... Is there a possibility to use a file like company.json and access it with http? I really want to check my code. – fangio Jul 05 '17 at 08:58
there seems to be some sort of confusion. your CORS is turned off (not enabled) on the server. Or, it might be turned on, but its not allowed for your localhost:4200 origin. That is why your browser won't allow you such requests. It has nothing to do with your client side code. Its on the browser level and what origins server allow (localhost:4200 is just another origin) – dee zg Jul 05 '17 at 09:00
yes I know, but I want to check my code so I made a JSON file (locally) with the request-body in it, so I want to http-request the local-file so I can check the code that makes the html.. but I can't seem to find the path to the file: – fangio Jul 05 '17 at 09:03

Angular 4 Headers not passing

3 Answers3