Why my $.ajax showing "preflight is invalid redirect error"?

JavascriptJqueryAjax

Javascript Problem Overview


I tried the following code in Postman and it was working. Is there something wrong with the code?

$.ajax({
   url: 'http://api.example.com/users/get',
   type: 'POST',
   headers: {
	  'name-api-key':'ewf45r4435trge',
   },
   data: {
	  'uid':36,
   },
   success: function(data) {
	  console.log(data);
   }
});

I got this error in my console as below, please advise.

> XMLHttpRequest cannot load http://api.example.com/users/get Response > for preflight is invalid (redirect)

Javascript Solutions


Solution 1 - Javascript

I received the same error when I tried to call https web service as http webservice.

e.g when I call url 'http://api.example.com/users/get'
which should be 'https://api.example.com/users/get'

This error is produced because of redirection status 302 when you try to call http instead of https.

Solution 2 - Javascript

This answer goes over the exact same thing (although for angular) -- it is a CORS issue.

One quick fix is to modify each POST request by specifying one of the 'Content-Type' header values which will not trigger a "preflight". These types are:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

ANYTHING ELSE triggers a preflight.

For example:

$.ajax({
   url: 'http://api.example.com/users/get',
   type: 'POST',
   headers: {
      'name-api-key':'ewf45r4435trge',
      'Content-Type':'application/x-www-form-urlencoded'
   },
   data: {
      'uid':36,
   },
   success: function(data) {
      console.log(data);
   }
});

Solution 3 - Javascript

The error indicates that the preflight is getting a redirect response. This can happen for a number of reasons. Find out where you are getting redirected to for clues to why it is happening. Check the network tab in Developer Tools.

One reason, as @Peter T mentioned, is that the API likely requires HTTPS connections rather than HTTP and all requests over HTTP get redirected. The Location header returned by the 302 response would say the same url with http changed to https in this case.

Another reason might be that your authentication token is not getting sent, or is not correct. Most servers are set up to redirect all requests that don't include an authentication token to the login page. Again, check your Location header to see if this is where you're getting sent and also take a look to make sure the browser sent your auth token with the request.

Oftentimes, a server will be configured to always redirect requests that don't have auth tokens to the login page - including your preflight/OPTIONS requests. This is a problem. Change the server configuration to permit OPTIONS requests from non-authenticated users.

Solution 4 - Javascript

Please set http content type in header and also make sure the server is authenticating CORS. This is how to do it in PHP:

//NOT A TESTED CODE
header('Content-Type: application/json;charset=UTF-8');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: DELETE, HEAD, GET, OPTIONS, POST, PUT');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
header('Access-Control-Max-Age: 1728000');

Please refer to:

http://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work

Solution 5 - Javascript

My problem was that POST requests need trailing slashes '/'.

Solution 6 - Javascript

I had the same problem and it kept me up for days. At the end, I realised that my URL pointing to the app was wrong altogether. example:

URL: 'http://api.example.com/'
URL: 'https://api.example.com/'.

If it's http or https verify.
Check the redirecting URL and make sure it's the same thing you're passing along.

Solution 7 - Javascript

I had the same error, though the problem was that I had a typo in the url

url: 'http://api.example.com/TYPO'

The API had a redirect to another domain for all URL's that is wrong (404 errors).

So fixing the typo to the correct URL fixed it for me.

Solution 8 - Javascript

My problem was caused by the exact opposite of @ehacinom. My Laravel generated API didn't like the trailing '/' on POST requests. Worked fine on localhost but didn't work when uploaded to server.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJennifer Aniston View Question on Stackoverflow
Solution 1 - JavascriptPeter T.View Answer on Stackoverflow
Solution 2 - JavascriptJoshuaDavidView Answer on Stackoverflow
Solution 3 - JavascriptPlankyView Answer on Stackoverflow
Solution 4 - JavascriptAirwind711View Answer on Stackoverflow
Solution 5 - JavascriptehacinomView Answer on Stackoverflow
Solution 6 - JavascriptChambah RussellView Answer on Stackoverflow
Solution 7 - JavascriptBolliView Answer on Stackoverflow
Solution 8 - Javascriptuser558720View Answer on Stackoverflow