添加 contentType: "application/json" 出错

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 参数给出空值。当我取消注释 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 文件中的<system.webServer> 标记下添加<httpProtocol>，如下所示：

<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>

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

• contentType: 'application/json' with POST method (JavaScript)

• Jquery JQGrid breaks when contentType=application/json?

• AJAX POST call with application/json contentType gets “no 'Access-Control-Allow-Origin' header” error

那么如何通过设置真正的 Content Type 从 HTML 文件调用 Restful 服务并在请求正文中发送 JSON 数组？

Answer 1

向浏览器发送标头是服务器的工作。 ajax 调用是客户端请求。您无需在其上发送标头。实际上，您可以返回类型可以是 'json'。你不需要serializeArray，serialize函数就可以了

post 请求的简写形式如下：

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

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

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

您可以使用任何特定的 url 而不是使用“*”。如果所有请求来自资源存在的域之外，则此通配符实际上允许所有请求有效。

Answer 2

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

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

那么如何通过设置真正的 Content Type 从 HTML 文件调用 Restful 服务并在请求正文中发送 JSON 数组？

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

具体操作方式取决于正在运行的特定服务器后端 http://localhost:45407。但无论如何，它需要在该服务器上进行配置。您无法从客户端执行此操作。