使用 HTTP-POST 提交表单会导致 CORS 错误

Question

有一个用 C++ 编写的后端，用于处理 HTTP 请求（使用 JSON）。 前端使用语义ui，但是发送请求使用ajax：

$(document).ready(function () {
function createProjectJson(projectName) {
    var ret = JSON.stringify({
        project: {
            identity: {
                name: projectName
            }
        }
    })
    return ret;
}

var endpoints = {
    'createProject': 'http://127.0.0.1:1912/api/projects'
}

$('form .submit.button').click(function (event) {
    var proName = $("#createPro").val();
    if(proName.length === 0)
        event.preventDefault();
    else
    {
        var payload = createProjectJson(proName);

        $.ajax({
            dataType: "json",
            url: endpoints.createProject,
            data: payload,
            method: "POST"
        }).done(function( json ) {
            console.log("done");
         })
         .fail(function( xhr, status, errorThrown ) {
           console.log( "Error: " + errorThrown );
           console.log( "Status: " + status );
           console.dir( xhr );
         });
    }
});
});

表格如下所示：

 <form class="ui form">
        <div class="field">
            <label>Project name</label>
            <div class="field">
                <input id="createPro" type="text" name="name" placeholder="Give the project a name">
            </div>
        </div>
        <div class="ui checkbox">
            <input type="checkbox" class="hidden">
            <label>Project enabled</label>
        </div>
        <div class="ui submit button">Create</div>
    </form>

根据CORS，应该没有触发CORS。为什么我会收到此错误：

网络服务器在 172.0.0.1:5500 上运行（我在 VS 代码中使用实时服务器插件）。 我也在 PUT 上的后端实现了 CORS（在 CORS 响应中回显原点），但错误相同。我尝试在 CORS 响应中使用 *（在 Access-Control-Allow-Origin 中），结果相同。 服务器响应数据只是一个空的{}。 此外，我检查了后端（没有 OPTIONS req），wireshark 没有将任何其他包显示为 POST + 响应。

Answer 1

1. 根据规范，应该有 CORS 请求，而不是预检请求。
2. 代码在http://127.0.0.1:1912 中运行，而资源在http://127.0.0.1:5500 中。不同的端口意味着不同的 Origin，因此这是一个 CORS 请求。
3. 在您提供的屏幕截图中，响应标头中没有 Access-Control-Allow-Origin。您应该添加一个来解决问题。