使用 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 + response.

Answer 1

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

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

Form submit with HTTP-POST causes CORS error

html

javascript

cors

semantic-ui