Question

此脚本（在浏览器中执行）：

$(function(){
    $.ajax("http://localhost:3000/rest/room/7", {
        type: "DELETE",
        success: function(data, statusText, jqXHR){
            $("p").text("complete, " + statusText + ", " + data.status + "    data=" + JSON.stringify(data) + "    jqXHR=" + JSON.stringify(jqXHR));
        },
        complete: function(data, statusText, jqXHR){
            $("p").text("complete, " + statusText + ", " + data.status + "    data=" + JSON.stringify(data) + "    jqXHR=" + JSON.stringify(jqXHR));
        }
    });
});

和这条Express路线def：

app.delete('/rest/room/:id', function(req, res){
    res.json(JSON.stringify(findings[0]));
});

在浏览器中找到我：

complete, error, 404 data={"readyState":4,"status":404,"statusText":"error"} jqXHR=undefined

和此控制台输出（使用PhpStorm IDE）：

OPTIONS /rest/room/7 200 1ms - 4.51kb

为什么'DELETE'请求会成为'OPTIONS'请求？我错过了什么？

Answer 1

这是因为您尝试执行跨域DELETE请求。在较旧的浏览器中，这不受支持，但较新的浏览器支持CORS，只要目标服务器和浏览器都支持它，就可以轻松实现跨域请求。

在CORS中，服务器将其数据与特殊标头一起发送，让浏览器知道什么是不允许的。在GET，HEAD和POST请求的情况下，简单地期望Access-Control-Allow-Origin标头与请求数据一起发送，并且具有页面主机名的值请求资源。

对于DELETE次请求，它会首先发送OPTIONS请求以确认是否允许DELETE通过CORS。在这种情况下，您需要返回第二个标头Access-Control-Allow-Methods，其值为DELETE（以及您希望支持的任何其他方法，不在我上面的列表中）。

所以在你的情况下，你应该有这样的东西：

app.options('/rest/room/:id', function(req, res){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'DELETE');
  res.end();
});

根据用例的不同，您可能不需要'*'，而应列出允许访问API的实际域名。

另一种选择是完全避免跨域请求。目前您正在访问端口3000上的节点，但HTML是通过端口80上的（我假设Apache？）加载的，这意味着它们是通过完全独立的服务器加载的。您可以考虑通过中介代理您的流量，以便两个请求都转到同一台服务器。

DELETE成为OPTIONS？

1 个答案: