json - 无法在 jQuery.ajax 中将内容类型设置为 'application/json'

当我有这个代码时

$.ajax({
    type: 'POST',
    //contentType: "application/json",
    url: 'http://localhost:16329/Hello',
    data: { name: 'norm' },
    dataType: 'json'
});

在 Fiddler 中我可以看到以下原始请求

POST http://localhost:16329/Hello HTTP/1.1
Host: localhost:16329
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost:14693/WebSite1/index.html
Content-Length: 9
Origin: http://localhost:14693
Pragma: no-cache
Cache-Control: no-cache

name=norm

但我正在尝试将内容类型从 application/x-www-form-urlencoded 设置为 application/json。但是这段代码

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: 'http://localhost:16329/Hello',
    data: { name: 'norm' },
    dataType: "json"
});

产生奇怪的请求(我可以在 Fiddler 中看到)

OPTIONS http://localhost:16329/Hello HTTP/1.1
Host: localhost:16329
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: http://localhost:14693
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache

这是为什么呢？应该在那里发布的选项是什么？我的内容类型在哪里设置为 application/json？并且请求参数由于某种原因消失了。

更新 1

在服务器端，我有非常简单的 RESTful 服务。

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class RestfulService : IRestfulService
{
    [WebInvoke(
        Method = "POST",
        UriTemplate = "Hello",
        ResponseFormat = WebMessageFormat.Json)]
    public string HelloWorld(string name)
    {
        return "hello, " + name;
    }
}

但由于某种原因，我无法使用参数调用此方法。

更新 2

抱歉这么久没有回复。

我已将这些 header 添加到我的服务器响应中

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Headers: Content-Type
 Access-Control-Allow-Methods: POST, GET, OPTIONS

它没有帮助，我有 Method not allowed 来自服务器的错误。

这是我的 fiddler 说的

enter image description here

所以，现在我可以确定我的服务器接受 POST、GET、OPTIONS(如果响应 header 像我预期的那样工作)。但是为什么“方法不允许”？

在来自服务器的 WebView 响应中(您可以在上图中看到 Raw 响应)看起来像这样

enter image description here

最佳答案

似乎从 URL 选项中删除 http:// 可以确保发送正确的 HTTP POST header 。

我认为您不需要完全限定主机的名称，只需使用下面的相对 URL。

   $.ajax({
      type: "POST",
      contentType: "application/json",
      url: '/Hello',
      data: { name: 'norm' },
      dataType: "json"
   });

我的一个例子:

        $.ajax({
            type: "POST",
            url: siteRoot + "api/SpaceGame/AddPlayer",
            async: false,
            data: JSON.stringify({ Name: playersShip.name, Credits: playersShip.credits }),
            contentType: "application/json",
            complete: function (data) {
            console.log(data);
            wait = false;
        }
    });

经过更多研究后，我发现 OPTIONS header 用于确定是否允许来自原始域的请求。使用 fiddler，我将以下内容添加到服务器的响应 header 中。

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Headers: Content-Type
 Access-Control-Allow-Methods: POST, GET, OPTIONS

一旦浏览器收到此响应，它就会发送带有 JSON 数据的正确 POST 请求。似乎默认的 form-urlencoded 内容类型被认为是安全的，因此不会进行额外的跨域检查。

您似乎需要将前面提到的 header 添加到您的服务器对 OPTIONS 请求的响应中。您当然应该将它们配置为允许来自特定域而不是所有域的请求。

我使用下面的 jQuery 进行了测试。

$.ajax({
   type: "POST",
   url: "http://myDomain.example/path/AddPlayer",
   data: JSON.stringify({
      Name: "Test",
       Credits: 0
   }),
   //contentType: "application/json",
   dataType: 'json',
   complete: function(data) {
       $("content").html(data);
  }
});

引用资料:

关于json - 无法在 jQuery.ajax 中将内容类型设置为 'application/json'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9754767/

json - 无法在 jQuery.ajax 中将内容类型设置为 'application/json'

上一篇：javascript - 什么是领先的 LINQ for JavaScript 库？

下一篇：python - 如何以 JSON 格式发送 POST 请求？