0

Im having trouble with the angular $http.get request and header parameter. Im trying to replicate this cURL

curl -X GET --header "Accept: application/json" --header "authenticationkey: somerandomtoken" "http://external.domain.com/admin/"

Which gives me the response I want.

In angular:

var urlBase = "//external.domain.com/admin/";
var config = {
    headers:{
        'Accept'           : 'application/json',
        'authenticationkey': 'somerandomtoken'
     }
};
dataFactory.getToken = function () {
    return $http.get(urlBase,config);
};

And I get this error message:

XMLHttpRequest cannot load http://external.domain.com/admin/. Request header field authenticationkey is not allowed by Access-Control-Allow-Headers in preflight response.

This is driving me insane. Also tried this, AngularJS $http custom header for all requests and it gives me the same error. Any ideas?

Community
  • 1
  • 1
henrik123
  • 1,605
  • 13
  • 19
  • 3
    Simple issue of CORS settings on remote server not allowing the header. Nothing you can do about it unless you control the other domain. Use a proxy on your own server – charlietfl Mar 16 '16 at 23:24
  • 3
    The server-side API needs to be able to accept pre-flight requests (`OPTIONS`) with all the same headers as the normal request. You don't get this problem with `curl` because it is not limited by JavaScript's *same origin policy* – Phil Mar 16 '16 at 23:25
  • Thanks @charlietfl I don't control the domain, i'll have to notify the backend administrator. – henrik123 Mar 16 '16 at 23:32
  • Thanks for a detailed response @Phil – henrik123 Mar 16 '16 at 23:32

1 Answers1

0

This is a CORS issue. It happens if the application server and API domains are not same.

Solution for this could -

  1. Allow cross origin domain request on your API server. But that will lead to allowing access to everyone to use yours APIs. So think of that as well. You can also restrict a particular domain in your server side.
  2. If you need it just for development purpose and your final bundle is going to release on same domain only then use this plugin in Chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en which will allow accessing such resources for temporary purpose.
  3. Third option is to host those API JS libraries on your domains API server similar to Facebook and Google APIs. The API JS will work as a bridge between both the parties.
Ashvin777
  • 1,446
  • 13
  • 19