无法在jQuery.ajax中将content-type设置为“application / json”

当我有这个代码

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

在提琴手我可以看到下面的原始请求

 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中将content-type设置为application / json 。 但是这个代码

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

产生奇怪的请求（我可以看到在提琴手）

 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 

这是为什么？ 什么是OPTIONS当它应该在那里？ 我的内容types设置为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

对不起，没有回答这么久。

我已经将这些标题添加到我的服务器响应

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

它没有帮助，我有方法不允许服务器错误。

这是我的提琴手所说的

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

在服务器的WebView响应中（您可以在上面的图片中看到Raw响应）看起来像这样

Answer 1

看起来，从url选项中删除http://可确保发送正确的HTTP POST标头。

我不认为你需要完全限定主机的名称，只需使用相对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; } }); 

可能有关： jQuery $ .ajax（），$ .post在Firefox中将REQUEST_METHOD作为“OPTIONS”发送

编辑：经过一些更多的研究后，我发现OPTIONS头被用来找出是否允许来自原始域的请求。 使用fiddler，我将以下内容添加到来自服务器的响应头文件中。

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

一旦浏览器收到这个响应，然后用json数据发送正确的POST请求。 这似乎是默认的formsurlencoded内容types被认为是安全的，所以不经过额外的跨域检查。

看起来您需要将前面提到的标题添加到您的服务器响应OPTIONS请求。 你当然应该configuration它们来允许来自特定域的请求，而不是全部。

我用下面的jQuery来testing这个。

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

参考文献：

• http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
• http://enable-cors.org/
• https://developer.mozilla.org/en/http_access_control

Answer 2

我可以告诉你我是如何使用它的

  function GetDenierValue() { var denierid = $("#productDenierid").val() == '' ? 0 : $("#productDenierid").val(); var param = { 'productDenierid': denierid }; $.ajax({ url: "/Admin/ProductComposition/GetDenierValue", dataType: "json", contentType: "application/json;charset=utf-8", type: "POST", data: JSON.stringify(param), success: function (msg) { if (msg != null) { return msg.URL; } } }); } 

Answer 3

所以你所需要做的就是增加：

 headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } 

作为您的发布请求的一个字段，它会工作。

Answer 4

我认识到这些屏幕，我使用CodeFluentEntities，我也有解决scheme。

我正在使用这种结构：

 $.ajax({ url: path, type: "POST", contentType: "text/plain", data: {"some":"some"} } 

正如你所看到的，如果我使用

 contentType: "", 

要么

 contentType: "text/plain", //chrome 

一切工作正常。

我不是100％确定这是你所需要的，因为我也改变了标题。

Answer 5

我在这里find了解决这个问题的方法。 不要忘记在IIS应用程序服务处理程序上允许动词选项。

工作正常。 谢谢AndréPedroso。 🙂

Answer 6

我遇到过同样的问题。 我正在jboss服务器上运行java rest应用程序。 但是我认为这个解决scheme在一个ASP .NET的webapp上是类似的。

Firefox会预先调用您的服务器/resturl来检查哪些选项是允许的。 这是您的服务器没有相应回复的“选项”请求。 如果这个OPTIONS调用被正确回复，则会执行第二个调用，这是对json内容的实际“POST”请求。

这只在执行跨域调用时发生。 在你的情况下调用“ http://localhost:16329/Hello ”，而不是调用同一个域下的urlpath“/ Hello”

如果您打算进行跨域调用，则必须使用带注释的方法来增强您的rest服务类，并支持“OPTIONS”http请求。 这是相应的Java实现：

 @Path("/rest") public class RestfulService { @POST @Path("/Hello") @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.TEXT_PLAIN) public string HelloWorld(string name) { return "hello, " + name; } //THIS NEEDS TO BE ADDED ADDITIONALLY IF MAKING CROSS-DOMAIN CALLS @OPTIONS @Path("/Hello") @Produces(MediaType.TEXT_PLAIN+ ";charset=utf-8") public Response checkOptions(){ return Response.status(200) .header("Access-Control-Allow-Origin", "*") .header("Access-Control-Allow-Headers", "Content-Type") .header("Access-Control-Allow-Methods", "POST, OPTIONS") //CAN BE ENHANCED WITH OTHER HTTP CALL METHODS .build(); } } 

所以我想在.NET中你必须添加一个附加的方法注释

 [WebInvoke( Method = "OPTIONS", UriTemplate = "Hello", ResponseFormat = WebMessageFormat.)] 

在哪里设置下列标题

 .header("Access-Control-Allow-Origin", "*") .header("Access-Control-Allow-Headers", "Content-Type") .header("Access-Control-Allow-Methods", "POST, OPTIONS") 

Answer 7

如果你使用这个：

 contentType: "application/json" 

AJAX不会发送GET或POST params到服务器….不知道为什么。

我花了几个小时才知道今天。

只是使用：

 $.ajax( { url : 'http://blabla.com/wsGetReport.php', data : myFormData, type : 'POST', dataType : 'json', // contentType: "application/json", success : function(wsQuery) { } } )