contentType: 'application/json' 使用 POST 方法 (JavaScript)答案

【问题标题】：contentType: 'application/json' with POST method (JavaScript)contentType: 'application/json' 使用 POST 方法 (JavaScript)
【发布时间】：2014-04-27 04:35:54
【问题描述】：

我需要在 JavaScript 中创建一个 Web 服务器客户端，但在定义请求标头时遇到了一些问题。

我需要 POST 方法和 Content-Type: "application/json"。

我试过了：

    $.ajax({
            url: 'http://MyWebServiceAddress',
            data: JSON.stringify({user:'user',pass:'pass'}),
            type: 'POST',
            crossDomain: true,
            dataType: 'json',
            success: function () {
                    alert("success")
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Error: " + xhr.status + "\n" +
                        "Message: " + xhr.statusText + "\n" +
                        "Response: " + xhr.responseText + "\n" + thrownError);
            }
        });

但是如果我把 contentType 写成这样：

contentType: '应用程序/json; charset=utf-8',

然后使用 Chrome 开发工具查看请求，我可以看到该方法已更改为“OPTIONS”并键入“text/plain”

有人可以帮助我吗？我不必使用 Ajax，所以如果有人知道一个好的 JavaScript 库来使客户端更容易，也许会导致我的问题

【问题讨论】：

看这里stackoverflow.com/questions/12132760/…

标签： javascript jquery ajax web-services http-headers

【解决方案1】：

跨域请求以same origin policy 为准。

他们require permission from the server到：

从响应中读取数据
首先提出某种请求

您已经触发了后一种情况，因此浏览器正在使用 OPTIONS 动词生成 preflight request。

服务器需要响应 CORS 标头授予权限。

类似：

Access-Control-Allow-Origin: http://your.server.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

…应该做的工作（未经测试）。

浏览器收到响应后，会发出 POST 请求。

【讨论】：

【解决方案2】：

您确实需要像您所写的那样设置contentType 标头； contentType 用于请求本身，而dataType 标头用于您期望从服务器返回的响应。因此，如果您将 contentType 添加到 $.ajax 请求中，它看起来是正确的。

“OPTIONS”请求是一个不同的问题：发送该请求是因为您必须发出“跨域”请求，这意味着 ajax 请求的服务地址 (http://MyWebServiceAddress) 与当前页面的“源”地址不同.是这样吗？例如，如果您的页面来自http://example.com，并且您正在从该页面向http://twitter.com 发出请求。您可以阅读有关跨域或 CORS 请求的更多信息 here。底线是$.ajax 必须像您一样在发布 JSON 数据之前发出单独的 ORIGIN 请求，然后它才会发出 POST 请求——当且仅当服务器位于 @ 987654331@ 配置为允许来自页面域的 CORS 请求。有关详细信息，请参阅上面的 CORS 链接。

【讨论】：