0

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");
Ahmed K
  • 3
  • 1

3 Answers3

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

Community
  • 1
  • 1
CommonToast
  • 621
  • 8
  • 14
  • 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; – Ahmed K Dec 30 '16 at 01:05
  • 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 : https://en.wikipedia.org/wiki/Cross-origin_resource_sharing/ , and an extensice explanation https://www.html5rocks.com/en/tutorials/cors/ – CommonToast Dec 30 '16 at 08:59
  • Thank you very much, it works without no issues :) Definitely, it is the best answer ! – Ahmed K Dec 30 '16 at 14:29
0

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

Zakaria
  • 14,316
  • 22
  • 82
  • 123
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

Community
  • 1
  • 1
Omri Lugasi
  • 327
  • 3
  • 15
  • 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 – Ahmed K Dec 30 '16 at 01:03
  • 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 – Omri Lugasi Dec 30 '16 at 11:55