DELETE成为OPTIONS？

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

这个快速路线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,简单地期望头部与请求数据一起发送,并且具有请求资源的页面的主机名的值.HEADPOSTAccess-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？)加载的,这意味着它们是通过完全独立的服务器加载的.您可以考虑通过中介代理您的流量,以便两个请求都转到同一台服务器.