AJAX - 预检 400 错误答案

【问题标题】：AJAX - preflight 400 errorAJAX - 预检 400 错误
【发布时间】：2017-03-19 07:11:56
【问题描述】：

在我的应用程序中，当我进行以下两步调用时，我在第二次 AJAX 调用时遇到预检错误：

$.ajax({
    type:'POST',
    url:'https://podio.com/oauth/token',
    data: {
        'grant_type': 'app',
        'app_id': '#####',
        'app_token': '#####',
        'client_id': '#####',
        'redirect_uri': '#####',
        'client_secret': '#####'
    }
}).done(function(response){
    $.ajax({
        type:'PUT',
        contentType: "application/json",
        headers: {'Authorization': 'OAuth2 ' + response.access_token},
        url:'https://api.podio.com/item/1/value/142784383',
        data: JSON.stringify({"values": "doofus@test.com"})
    }).done(function(response){
        console.log(response)
    }).fail(function(error){
        console.log(error)
    })
})

Chrome 中的错误（开启 CORS Toggle 浏览器扩展）如下：

jquery.min.js:4 选项https://api.podio.com/item/1 400 () test.html:1 XMLHttpRequest 无法加载 https://api.podio.com/item/1/value/142784383。预检响应具有无效的 HTTP 状态代码 400

和 Safari 日志

Failed to load resource: the server responded with a status of 403 (HTTP/2.0 403)

参考https://api.podio.com/item/1/value/142784383

尽管我在自己的应用程序中多次使用过这样的 AJAX 调用，但我对与外部 API 交互的一些细微差别还是有些陌生。对此问题的原因和解决方案的任何见解将不胜感激。

【问题讨论】：

不确定是不是这个问题，但需要发送：JSON.stringify({ values: doofus@test.com })
@KobyDouek 不要这么认为，内容类型意味着json本身可以工作。
@Achshar 是的，但无论如何这是正确的语法
JSON.stringify({"values": "doofus@test.com"}) 似乎是对的。在您的代码中，电子邮件需要用引号引起来。
@skwidbreth 当内容类型是异国情调时，浏览器会发送一个选项（预检）请求。您的 api 需要处理此 OPTIONS 请求。因此，请确保服务器在选项请求中发送 200 以及可接受的内容类型标头。 developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

标签： jquery ajax cors

【解决方案1】：

我看到您将内容类型定义为 application/json。这样做的原因是，当内容类型不是简单的 text/html（以及其他几个）时，浏览器会发送一个 OPTIONS 请求以确保服务器期待该内容类型。

然后服务器必须发送几个标头。您可能熟悉access-control-allow-origin: *，但服务器还需要告诉浏览器它愿意接受哪些标头字段。为此，服务器需要发送一个

Access-Control-Request-Headers: Content-Type

这告诉浏览器客户端可以在实际请求中发送内容类型标头。因此，您需要确保服务器不仅在 OPTIONS 请求中接受并返回 200，而且还发送上述两个标头。

在回复您的评论时，您无需在客户端上执行任何操作。服务器需要发送这些标头。

【讨论】：

谢谢你 - 这真的解决了这个问题。在这种情况下，我无法控制服务器（我们正在与之合作的供应商），所以我似乎需要更仔细地研究这个过程。
如果它是供应商并且他们正在等待请求，那么他们也必须已经在发送标头。我建议您在类似 Postman 的软件中提出请求，并确保它无论如何都能正常工作。您提到的 403 是身份验证令牌问题的恶臭。
是的，你帮我破解了这个！这实际上似乎是一个权限问题 - 我认为我们需要升级 api 密钥的信任级别。