Angular JS. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

Question

I have tried all things, use CORS plugin. disable web-security in chrome. The response is coming in POSTMAN but not able to fetch it in $http.

$http({
  url: "https://interview-api-staging.bytemark.co/books",
  method: 'GET',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS,POST,GET,OPTIONS,PUT,DELETE',
    'Access-Control-Allow-Headers': 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since'
  }
}).then(function(d) {
  console.log(d);
});

What do you mean by "not able to fetch it"? Do you get an error response? Does anything print in the console? — DaveyDaveDave, Sep 21 '17 at 06:43

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Use CORS in your backend. Otherwise, you can check out Allow-Control-Allow-Origin: * in the Chrome Web Store, use chrome extension.

when you trying to hit through the angular app you need to turn on that extension.

otherwise you need to active CORS in your backend application

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 21 '17 at 08:54

Sangram Badi

4,054
9
45
78

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Client has nothing to do with it. With a CORS header, you're telling the client which other servers do I trust. Those then can share your resources and client won't mind.

For example if you have two domains you tell the client so let your resources be used by your second website, you don't say I trust you as a client.

So you're protecting the server, not client. You don't want AJAX API Endpoints to be accessible by scripts hosted anywhere in the world.

A client has nothing to gain/lose from this. It's only a protection for servers because using AJAX all the URLs are clearly visible to anyone and had it been not for this protection, anybody could go-ahead run their front end using your API, only servers have to lose from this so they get to decide who can use their resources.

source.

As mentioned you don't need to do any cors related stuff in the front-end. Make sure the cors headers are sent from the backend in its response headers.

It is the server that has to protect itself so they have to tell some rules to the client which client will follow. By default, the client will accept everything.

Angular JS. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

2 Answers2