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

IT技术 javascript jquery ajax
2021-03-14 17:46:31

我在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预检响应无效(重定向)

6个回答

当我尝试将 https web 服务称为 http web 服务时,我收到了同样的错误。

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

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

这个答案涉及完全相同的事情(尽管是角度问题)——这是一个 CORS 问题。

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

  • 应用程序/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-Typeapplication/x-www-form-urlencoded,我仍然遇到同样的错误。
2021-05-12 17:46:31

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

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

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

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

请在标头中设置 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

Access-Control-Allow-Origin 标头如何工作?

它是一个服务器端 PHP(可能不是您的服务器应用程序正在使用的)。这些标头由服务器发送,是使 CORS 工作所必需的。
2021-05-05 17:46:31
Access-Control-Allow-Origin有时不起作用*,您需要明确设置运行调用代码的来源。特别是在尝试包含凭据(身份验证 cookie)时。请参阅Fetch Spec 上的此表
2021-05-12 17:46:31

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