为什么我的 $.ajax 显示“预检无效重定向错误”？答案

【问题标题】：Why my $.ajax showing "preflight is invalid redirect error"?为什么我的 $.ajax 显示“预检无效重定向错误”？
【发布时间】：2016-02-12 05:55:14
【问题描述】：

我在Postman 中尝试了以下代码，它正在工作。代码有问题吗？

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

我的控制台出现如下错误，请指教。

XMLHttpRequest 无法加载 http://api.example.com/users/get 响应预检无效（重定向）

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

当我尝试将 https 网络服务调用为 http 网络服务时，我收到了同样的错误。

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

当您尝试调用http而不是https时，由于重定向状态302而产生此错误。

【讨论】：

【解决方案2】：

This answer 重复了完全相同的事情（尽管对于角度而言）——这是一个 CORS 问题。

一种快速修复方法是通过指定一个不会触发“预检”的 'Content-Type' 标头值来修改每个 POST 请求。这些类型是：

application/x-www-form-urlencoded
多部分/表单数据
文本/纯文本

ANYTHING ELSE 会触发预检。

例如：

$.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);
   }
});

【讨论】：

我的 Content-Type 是 application/x-www-form-urlencoded，我仍然遇到同样的错误。

【解决方案3】：

该错误表明预检正在获得重定向响应。发生这种情况的原因有很多。 找出您被重定向到的位置，以获取有关其发生原因的线索。检查开发者工具中的网络标签。

正如@Peter T 所提到的，一个原因是 API 可能需要 HTTPS 连接而不是 HTTP，并且所有通过 HTTP 的请求都会被重定向。在这种情况下，302 响应返回的 Location 标头将显示与 http 更改为 https 的相同 url。

另一个原因可能是您的身份验证令牌未发送或不正确。大多数服务器都设置为将所有不包含身份验证令牌的请求重定向到登录页面。再次检查您的 Location 标头以查看您是否收到此消息，并查看以确保浏览器将您的身份验证令牌与请求一起发送。

通常，服务器将被配置为始终将没有身份验证令牌的请求重定向到登录页面 - 包括您的 preflight/OPTIONS 请求。这是个问题。更改服务器配置以允许来自未经身份验证的用户的 OPTIONS 请求。

【讨论】：

【解决方案4】：

请在标头中设置 http 内容类型，并确保服务器正在验证 CORS。这是在 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');

请参考：

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

How does Access-Control-Allow-Origin header work?

【讨论】：

它是一个服务器端 PHP（可能不是您的服务器应用程序使用的）。这些标头由服务器发送，是使 CORS 工作所必需的。
Access-Control-Allow-Origin 有时不适用于*，您需要明确设置调用代码的运行来源。特别是在尝试包含凭据（身份验证 cookie）时。请参阅 Fetch Spec 中的 this table。

【解决方案5】：

我的问题是 POST 请求需要尾部斜杠“/”。

【讨论】：

【解决方案6】：

我遇到了同样的问题，这让我好几天都无法解决。最后，我意识到指向应用程序的 URL 完全错误。示例：

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

如果是 http 或 https 验证。
检查重定向 URL 并确保它与您传递的内容相同。

【讨论】：

【解决方案7】：

我遇到了同样的错误，但问题是我的网址中有错字

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

API 将所有错误的 URL 重定向到另一个域（404 错误）。

因此，将错字修复到正确的 URL 为我修复了它。

【讨论】：

【解决方案8】：

我的问题与@ehacinom 完全相反。我的 Laravel 生成的 API 不喜欢 POST 请求的尾随 '/'。在本地主机上工作正常，但在上传到服务器时不起作用。

【讨论】：