Angular $http executed twice when using headers

Question

I'm developing an ionic project and I'm using header parameters in each POST and GET Request. How ever When I test the project on Android Phone and monitor all requests that come into my server through my android device there are no issues. But when I deploying my ionic project and testing it in my web browser ( Chrome Web Browser ) I see that each request has been executed twice,( one without headers params and without inputs when I use POST method, and the second one is with all params ). I've solved it in my server if there are no header parameters to ignore the request each time. How can I prevent the duplicated execution for the $http (POST and GET)? These parameters I've set in the angular.config js file.

$httpProvider.defaults.headers.common['Accept'] = 'application/json; q=0.01';
$httpProvider.defaults.headers.common['Authorization-Token'] = value;

and my PHP service starts with

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization-Token");
header('Access-Control-Max-Age: 60');
header('Access-Control-Allow-Methods: ["GET","POST"]');
header("Content-Type: application/json; charset=UTF-8");

Sounds like CORS with during the preflight request . On first time it call OPTIONS method and second time it will again call the POST or GET method — Sudharsan S
– Sudharsan S, Commented Dec 29, 2016 at 12:48

Community · Accepted Answer · 2017-05-23 12:24:40Z

1

Sounds like an OPTION call indeed.

It should be done, and not carry any payload, it is just to check with the server what actions are allowed on the resource before performing the actual call (post/get/whatever).

Check the answer to this similar question : Angular 2 HTTP POST does an OPTIONS call

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 29, 2016 at 12:55

CommonToast

73813 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ahmed K Over a year ago

Thank you, Could I do an early exit in my web service if the request was a pre flight one ? something like : if ($request_type=="pre-flight") return;

CommonToast Over a year ago

Definitely you can. Depending on the framework you use serverside the implementation is a little different ofcourse. I prefer Laravel, catch it in a middleware with $request->method() == 'options'. Or in plain PHP $_SERVER['REQUEST_METHOD'] == 'OPTIONS'. Just to be clear, the options call is not just to make the developer add more catches, and there are headers that you can or should return to define the application allowed operations. The basics : en.wikipedia.org/wiki/Cross-origin_resource_sharing , and an extensice explanation html5rocks.com/en/tutorials/cors

Ahmed K Over a year ago

Thank you very much, it works without no issues :) Definitely, it is the best answer !

Zakaria · Accepted Answer · 2016-12-29 12:51:01Z

0

The first request is the preflight. This is part of the browser mechanism. You cannot avoid it.

answered Dec 29, 2016 at 12:51

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:05Z

0

It all comes down to how browsers manage CORS. When making a cross-domain request in JavaScript that is not "simple" (i.e. a GET request), the browser will automatically make a HTTP OPTIONS request to the specified URL/URI, called a "pre-flight" request or "promise". As long as the remote source returns a HTTP status code of 200 and relevant details about what it will accept in the response headers, then the browser will go ahead with the original JavaScript call

Please look here and here

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Dec 29, 2016 at 12:53

Omri Lugasi

3273 silver badges16 bronze badges

2 Comments

Ahmed K Over a year ago

Thank you Lugas. Could I prevent it in my web service by checking the type of the request ,so, if it's a pre-flight request I don't want my web service to execute the rest of the code. I mean somtheing like (early exit): if ($request_type=="pre-flight") return; // don't execute any more

Omri Lugasi Over a year ago

I handle this in my work too, and search for ever for something that can check before the request start, but no result here... if i will find something better, i will tell you right away... :\ @AhmedK

Collectives™ on Stack Overflow

Angular $http executed twice when using headers

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related