Javascript HTML表单方法是POST，但它是'；s作为选项提交

至少可以说，我有一件奇怪的事情发生了

提交时具有

post

方法的html表单使用的是

options

，以下是html代码：

<form action="https://omitted" method="post" id="canvasForm">
    <div class="form-group" style="margin-top: 10%; text-align: center;">
        <h1>Canvas Integration</h1>
        <label style="text-align: right;" for="school_name" class="col-sm-4 control-label">School Prefix *</label>
        <div class="col-sm-10">
            <input type="text" style="margin-right: 1%; margin-bottom: 2%; width:60%" class="form-control" name="school_name" placeholder="School Prefix" tabindex="1" required>
            <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
        </div>
        <label style="text-align: right;" for="code" class="col-sm-4 control-label">Code *</label>
        <div class="col-sm-6" >
            <input id="code" type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="code" tabindex="1" placeholder="code" required>
        </div>
        <label style="text-align: right;" for="code" class="col-sm-4 control-label">School Canvas URL *</label>
        <div class="col-sm-6" >
            <input id="canvas_url" type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="canvas_url" tabindex="1" placeholder="school canvas url" required>
        </div>
        <label style="text-align: right;" for="clientid" class="col-sm-4 control-label">ID *</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" style="margin-bottom: 2%;margin-right: 1%; width:60%" name="clientid" placeholder="ID" tabindex="1" required>
            <div class="tooltip">
                <i class="fa fa-question-circle" aria-hidden="true" >
                <img  class="tooltiptext" src="images/clientid.png" style="width: 550px"></i>
            </div>
        </div>
        <label style="text-align: right;" for="securitykey" class="col-sm-4 control-label">Key *</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="securitykey" placeholder="Key" tabindex="1" required>
            <div class="tooltip">
                <i class="fa fa-question-circle" aria-hidden="true" >
                <img  class="tooltiptext" src="images/securitykey.png" style="width: 550px"></i>
            </div>
        </div>
        <div class="col-sm-6">
            <input id="redirect_url" type="hidden" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%;float: center;" name="redirect_url" placeholder="Canvas URL" tabindex="1" required>
        </div>
    </div>
    <div class="form-group" style="text-align: center;">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary btn-w-md" >Submit</button>
        </div>
    </div>
    <div class="form-group" style="text-align: center;">
        <div id="response" class="col-sm-offset-2 col-sm-10">
        </div>
    </div>
</form>

画布集成
学校前缀*
代码*
学校画布URL*
身份证*
钥匙*
提交

我有一些提交表单的JS代码：

    form.onsubmit = function (e) {
        // stop the regular form submission
        e.preventDefault();

        // collect the form data while iterating over the inputs
        var data = {};
        for (var i = 0, ii = form.length; i < ii; ++i) {
          var input = form[i];
          if (input.name) {
            data[input.name] = input.value;
          }
        }
        // construct an HTTP request
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

        // send the collected data as JSON
        xhr.send(JSON.stringify(data));

        xhr.onloadend = function (response) {
          console.log('response from server',response);
          var responseHtml = document.getElementById('response');
          if(response.target.status==400){
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + response.target.response +'. Please contact edquire support team at support@edquire.com.' + '</div>';
          } else if (response.target.status==200) {
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + response.target.response +'! Your Canvas resource is successfully connected with us :)' + '</div>';
          } else {
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + 'Something went wrong :( Please Try Again!' + '</div>';
          }
        };
    };

form.onsubmit=函数（e）{
//停止定期提交表格
e、 预防默认值（）；
//在迭代输入时收集表单数据
变量数据={}；
对于（变量i=0，ii=form.length；i

当我提交它时，我可以看到它正在使用

选项

，并且它没有传递输入字段（检查下面的屏幕截图）

---

CORS就是这样工作的。您正在向远程主机提交POST请求。首先，您的浏览器提交一个选项请求，以检查远程主机是否接受来自其他主机的HTTP请求。如果它接受，POST请求将在之后提交。

对于rest客户端，每个POST请求后面都会有一个POST。 这样做是为了验证一些事情，例如：

是否为有效请求

如果支持该方法等

您可以在此处找到其他线程的更多信息：

---

这是由于跨源资源共享（CORS）造成的，请参见“是的，谢谢你@JaromandaX！！！这就是为什么我通过postman测试时，它可以工作，但不能从HTML表单中进行测试，这是有意义的，现在CORS标题，你有没有费心调查Phil的链接？“首先，浏览器提交一个选项请求，以检查远程主机是否接受来自其他主机的HTTP请求“更详细地说，如果OP没有更改请求内容类型标头，则不会有飞行前

选项

请求。对远程资源的访问始终由

访问控制允许来源

响应标头（如果有）决定。”