Angular $http is sending OPTIONS instead of PUT/POST

by

Ok, I’ve solved it.

What was the problem?
The CORS workflow for DELETE, PUT and POST is as follows:

enter image description here

What it does, is:

  1. Checking which request is gonna be made
  2. If it’s POST, PUT or DELETE
  3. 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.
  4. 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:

  1. I already sent the Access-Control-Header
  2. What it solved was the first two lines, and
  3. Access-Control-Allow-Origin from the specific subdomain with Port

Best website I could find to learn more about CORS.

More Related Contents:

  1. How Can i Change the style of my angularjs object?
  2. authentification with angular js
  3. SyntaxError: Unexpected token o in JSON at position 1
  4. What is the $$hashKey added to my JSON.stringify result
  5. multiple, sequential fetch() Promise
  6. Angular – Can’t make ng-repeat orderBy work
  7. ngRepeat Filter by deep property
  8. How to make a jsonp request
  9. Not a Legal JSONP API — How to get data without CALLBACK parameter
  10. how to change the headers for angularjs $http.jsonp
  11. deserialize Jackson object in JavaScript containing JsonIdentityInfo
  12. Rename Object Key in an array using javascript
  13. Load static JSON file in Webpack
  14. JS: JSON retrieve all JSON data
  15. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  16. Why Does Firebase Lose Reference outside the once() Function?
  17. What is the minimum valid JSON?
  18. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  19. How do you put an image file in a json object?
  20. orderBy array item value in Angular ng-repeat
  21. Binding ng-model inside ng-repeat loop in AngularJS
  22. How to make POST requests with the FormData API
  23. How to convert HTML to JSON using PHP?
  24. AngularJS abort all pending $http requests on route change
  25. JavaScript recursive search in JSON object
  26. Render value without data-binding
  27. how to process fetch response from an ‘opaque’ type?
  28. JSON to string variable dump
  29. Validate phone number using angular js
  30. How is AngularJS different from jQuery

Leave a Comment