HTTP GET request changes into OPTIONS while adding headers in angular js

Question

Following is the request i used so far

$http.get(url)
    .success(function (data){})
    .error(function (data){})

works without any CORS issues. My server side Allows all origins, methods, all headers

when i add http header like

$http.get(url, { headers: { "USERID": user,  "SESSIONID": sessionId}})

the request changes into OPTIONS method when i see in chrome dev tools network tab

What is the reason for this? if it is expected then how to add custom http headers.

I have gone thru this link angularjs-performs-an-options-http-request-for-a-cross-origin-resource but it didnt help

Here i am expecting that server should allow different origins . But it is allowing headers, only if i were in a same server. But not sure about this is by angular or by server side.

after headers

$http.get(url,{ headers: { "USERID": user, "SESSIONID": sessionId } })

in chrome dev tools i am seeing like

Request Method:OPTIONS
Status Code:404 Not Found

but without headers

Request Method:GET
Status Code:200 OK

When i do this in REST Client, i can send headers to the backend.

Answer 1

$http({method: 'GET', url: '/someUrl', headers: { "USERID": user,  "SESSIONID": sessionId}}).
success(function(data, status, headers, config) {
  // this callback will be called asynchronously
  // when the response is available
}).
error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

will work. $http.get is a shortcut method. Check the config in the docs

Answer 2

This is a known bug, see for instance https://github.com/angular/angular.js/issues/1585 .

A workaround is to use a jQuery request.

Answer 3

I had the same massive issue when trying to pass header in my get, where it changes get to options and wouldn't work. In order to make it work I added the following in my php api

<?php if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {  
  if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'GET') {    
    header("Access-Control-Allow-Headers: Authorization, X-Auth-Token");    
  }
  exit;
} ?>

You can allow for any headers that you wish to pass. Hope this helps

Answer 4

For my particular problem with my C# Web API solution I had to have something handle the Options request. Angular was sending a preflight request method OPTIONS which I did allow in my web.config with

  <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS, PATCH" />

But that wasn't enough I also included a method to handle the Options Request and I returned nothing

[ResponseType( typeof( void ) )]
public IHttpActionResult OptionsPost() {
  return StatusCode( HttpStatusCode.NoContent );
}