无法设置内容类型为“应用/ JSON”在jQuery.ajax

Question

当我有这样的代码

$.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设置为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当它应该在那里？我的内容类型设置为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响应（你可以看到上面的图片生响应）看起来像这样

Answer 1

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

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 2

会似乎从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 sending "OPTIONS" as REQUEST_METHOD in Firefox

编辑： 一些更多的研究，我发现后的选项首部用于找出如果来自发起域的请求被允许。使用fiddler，我将以下内容添加到来自服务器的响应头文件中。

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

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

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

我用下面的jQuery来测试这个。

$.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 3

我发现这个问题here解决方案。不要忘记在IIS应用程序服务处理程序上允许动词选项。

工作正常。谢谢AndréPedroso。 :-)

Answer 4

我有同样的问题。我在jboss服务器上运行java rest应用程序。但我认为这个解决方案与ASP .NET webapp类似。

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

这只发生在执行跨域呼叫时。在你的情况下调用'http://localhost:16329/Hello'而不是调用相同域下的url路径'/ Hello'

如果打算进行跨域调用，则必须使用带注释的方法来增强休息服务类，选项“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 5

我认出那些画面，我用CodeFluentEntities，我已经有了解决方案，为工作我也是。

我使用的建设：

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

，你可以看到，如果我用

contentType: "", 

或

contentType: "text/plain", //chrome 

，一切工作正常。

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

Answer 6

因此，所有你需要为这个工作做的就是添加：

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

作为一个字段到您的文章请求，它会工作。

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) { } 
    } 
)