jquery - 添加 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参数给出 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 数组？

score 2 · Accepted Answer

添加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包含Content-Type在其值中的响应标头。

具体如何执行取决于http://localhost:45407正在运行的特定服务器后端。但无论如何，它需要在该服务器上进行配置。你不能从客户端做到这一点。

score 0 · Accepted Answer

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

post请求的简短形式如下：

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

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

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

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

jquery - 添加 contentType: "application/json" 出错

2 回答 2

Related

Reference