Question

在我的应用程序中，在进行以下两步调用时，我在第二次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的一些细微差别有点不熟悉。任何有关这个问题的原因和解决方案的见解将不胜感激。

Answer 1

我看到你将内容类型定义为application / json。与此相关的是，当内容类型不是简单文本/ html（以及其他几个）时，浏览器会发送OPTIONS请求以确保服务器期望内容类型。

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

Access-Control-Request-Headers: Content-Type

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

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

More

AJAX - 预检400错误

1 个答案: