Angular $http is sending OPTIONS instead of PUT/POST
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.
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);