node.js - 删除变成选项？

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 中，服务器发送它的数据以及特殊的 header ，让浏览器知道什么是允许的，什么是不允许的。在 GET、HEAD 和 POST 请求的情况下，它简单地期望 Access-Control-Allow-Origin header 与请求数据和请求资源的页面主机名的值一起发送。

在 DELETE 请求的情况下，它将首先发送一个 OPTIONS 请求以确认是否允许通过 CORS 进行 DELETE。在这种情况下，您需要返回第二个 header ，Access-Control-Allow-Methods，其值为 DELETE(以及您想要支持的任何其他方法t 在我上面的列表中)。

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

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 上访问 Node，但 HTML 是通过端口 80 上的(我假设是 Apache？)加载的，这意味着它们是通过完全独立的服务器加载的。您可以考虑通过中介代理您的流量，以便两个请求都发送到同一台服务器。