Question

我想要一个从HTML文件调用的服务。例如：

// POST api/values
public ActionResult Post([FromBody]Models.FormEntry[] composit)
{
    //Some Code here ...

    return new HttpStatusCodeResult(200);
}

然后我从下面的HTML文件中调用此服务：

<script>
    function onSubmit(form) {
        var data = $(form).serializeArray();
            $.ajax({
                type: "POST",
                url: "http://localhost:45407/api/values",
                data: JSON.stringify(data),
                dataType: "text",
                //contentType: "application/json",
                success: function () { alert('YES!'); },
                error: function () { alert('NO NO NO!'); }});
    }
</script>

它的行为正常，但没有发送任何服务，composit参数给出null值。当我取消注释contentType: "application/json"时，它会出错并且服务不会调用。我通过邮递员（Chrome扩展程序）进行测试，效果很好。邮递员向我推荐这段代码：

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "http://localhost:45407/api/values",
    "method": "POST",
    "headers": {
        "content-type": "application/json",
        "cache-control": "no-cache",
        "postman-token": "e1b9721b-2925-c413-69e0-b1b21de239cb"
      },
      "processData": false,
      "data": data
    }

    $.ajax(settings).done(function (response) {
          console.log(response);
    });

我将上面的代码替换为我的，但服务调用仍有未知错误。我认为这可能是一个安全考虑因素，我们不允许发送来自localhost的请求，因此我在服务web.config文件中的<httpProtocol>标记下添加<system.webServer>，如下所示：

<httpProtocol>
  <customHeaders>
  <add name="Access-Control-Allow-Origin" value="*" />
  <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
  <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, soapaction" />
  </customHeaders>
</httpProtocol>

对于这个问题，我看到了这个链接：

那么如何通过设置真实的内容类型从HTML文件中调用Restful服务并在请求体中发送JSON数组？

Answer 1

添加content-type: application/json请求标头会触发您的浏览器执行CORS预检OPTIONS请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS有更多详情。

那么如何通过设置真实的内容类型从HTML文件中调用Restful服务并在请求体中发送JSON数组？

您需要为http://localhost:45407/api/values端点配置服务器，以便在其值中发送包含Access-Control-Allow-Methods的{{1}}响应标头。

具体如何操作取决于正在运行的特定服务器后端Content-Type。但无论如何，都需要在该服务器上进行配置。你无法从客户端做到这一点。

Answer 2

向浏览器发送标题是服务器的工作。 ajax调用是客户端请求。你不需要在它上面发送标题。事实上，你可以返回类型可以＆＃39; json＆＃39;。你不需要serializeArray，序列化函数会起作用

一种简短的邮寄申请表如下：

$.post('http://localhost:45407/api/values',
    $('#formId').serialize(), function(response){
         //callback body
    }, 'json');

现在在服务器端，您需要进行一些更改在发送响应之前设置标题＆＃39; application / json＆＃39; 如果这是跨域请求，则ajax调用将不起作用。您必须将请求域列入白名单。

header('Access-Control-Allow-Origin: *');

您可以使用任何特定网址，而不是使用＆＃34; *＆＃34;。这个通配符实际上允许所有请求有效，如果它们来自资源所在域之外。

添加contentType：＆＃34; application / json＆＃34;犯错误

2 个答案: