0
510
ViewsAngular $http is sending OPTIONS instead of PUT/POST
I am trying to Update/Insert data in a MySQL database through a PHP backend. I'm building the Front End with AngularJS and using the $http service for communicating with the REST API.
My setup looks like this:
I'm setting the header via the $httpProvider:
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers = {'Content-Type': 'application/json;charset=utf-8'};
And the POST-Call looks like this:
return $http({
url: url,
method: "POST",
data: campaign
});
The Dev Console in Chrome shows me this:
When I change from POST to PUT, I'm sending an OPTIONS call instead a PUT. And the content-type switches just to content-type.
My request payload is send as an object:
How do I set my header properly?
EDIT:
The PHP backend sets some headers:
$e->getResponse()
->getHeaders()
->addHeaderLine('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
$e->getResponse()
->getHeaders()
->addHeaderLine('Access-Control-Allow-Origin', '*');
Is there something missing?
2 answers
Answer question0
Ok, I've solved it.
What was the problem?
The CORS workflow for DELETE, PUT and POST is as follows:
What it does, is:
- Checking which request is gonna be made
- If it's POST, PUT or DELETE
- It sends first an OPTION request to check if the domain, from which the request is sent, is the same as the one from the server.
- If not, it wants an Access-Header to be allowed to send this request
Important here: An OPTIONS request doesn't send credentials.
So my backend server disallowed the PUT request.
Solution:
Putting this inside the .htaccess file
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ blank.php [QSA,L]
Header set Access-Control-Allow-Origin "http://sub.domain:3000"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
After this, create an empty .php file called blank.php inside the public folder.
EDIT: As one commenter pointed out, instead of creating an empty PHP file, you can add this rewrite rule to your .htaccess file\;
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
To clarify:
- I already sent the Access-Control-Header
- What it solved was the first two lines, and
- Access-Control-Allow-Origin from the specific subdomain with Port
Best website I could find to learn more about CORS.
0
You don't need to specify your $http headers manually, it is all done for you behind the scenes and they are automatically set to application/json for POST and PUT type requests. So all that you should do is
$http.post(url, data);
$http.put(url, data);