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.

What are the changes you faced? var user = { name: 'foo name', age: 32 }; var sessionId = "somesessionid"; $promise = $http.get('header', { headers: { "USERID": user, "SESSIONID": sessionId } }); I tried with this. and worked well. — Anik, Aug 05 '14 at 06:50
I think you are sending request to different server. The header method doesn't change to OPTION from GET if you request within the same server. — Anik, Aug 05 '14 at 07:09
yeah its from cross origin. how to access a cross domain url? @Anik — prashanth-g, Aug 05 '14 at 08:16
use http://www.corsproxy.com/ in your code. like this, $promise = $http.get('http://www.corsproxy.com/en.wikipedia.org/wiki/Http'); — Anik, Aug 05 '14 at 08:45

score 0 · Answer 1 · answered Aug 05 '14 at 07:10

$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

score 0 · Answer 2 · answered Jan 07 '15 at 16:53

0

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

A workaround is to use a jQuery request.

answered Jan 07 '15 at 16:53

jrouquie

4,315
4
27
43

score 0 · Answer 3 · edited Oct 28 '15 at 19:48

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

score 0 · Answer 4 · answered Dec 07 '15 at 08:20

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 );
}

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

4 Answers4

Linked