设置 contentType 时 jquery ajax 不起作用答案

【问题标题】：jquery ajax not working when contentType is set设置 contentType 时 jquery ajax 不起作用
【发布时间】：2015-09-20 20:17:01
【问题描述】：

我有两个节点 js 服务器在 localhost:3000 和 localhost:3001 上运行。当我从 localhost:3001 向 localhost:3000 发出 ajax POST 请求时，没有任何反应。我检查了 localhost:3000 上的日志，它甚至没有收到 POST 请求。

这是我进行 ajax 调用的代码：

$.ajax({
    type:"POST",
    url:"http://localhost:3000/post/",
    contentType:"application/json",
    dataType:'json',
    data: JSON.stringify({name:'Bruce Wayne'}),
    success:function(response) {
        console.log(response);
    }
});

但是，当我删除 contentType 字段或将其更改为“text/plain”而不是“application/json”时，它可以工作。在 localhost:3000 上，我也在响应中发送这些标头。

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");

我已经解决了很多关于 SO 的问题并尝试了所有方法。有人可以帮我找出问题所在吗？谢谢。

【问题讨论】：

标签： jquery ajax node.js express

【解决方案1】：

这是 jQuery 长期存在的问题，就个人而言，不要问我为什么，但可行的解决方案是：

$.ajax({
    type: "POST",
    url:  "http://localhost:3000/post/",
    // contentType: "application/json", // Remove this bit.
    // dataType: 'json',                // Remove this bit.
    data: JSON.stringify({name:'Bruce Wayne'}),
    success:function(response) {
        console.log(response);
    }
});

并且不要在发送响应标头时提供application/json 或javascript/json 或text/json。让它成为：text/html 或 text/plain。让我知道它是否有效。

【讨论】：

你说的是真的，当我注释掉 contentType 时它确实有效。但是我无法解析服务器端的请求，因为它的格式不正确。有什么解决方法吗？
@HarshaReaper 你是如何解析这个的？这就是我说我不确定为什么会发生这种情况的原因，而且，这是有效的。 :P
我正在使用 express.js 并尝试通过 bodyParser.json() 进行解析。
@HarshaReaper 我不太擅长 NodeJS。那么，你遇到了什么问题？你不能用JSON.parse()解析它吗？
是的。我收到的请求正文为 {'{"Name": "Bruce Wayne"}': ''}。基本上，我们需要解析的字符串作为键发送到具有空值的对象中。这让事情变得非常困难。

【解决方案2】：

我能够自己解决这个问题，并且只是发布这个答案，以防将来有人使用 express 和 node 遇到类似的问题。

而不是将这三个标头添加到我的控制器函数中的响应中，例如

router.get('/post', function(req, res){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    ... //rest of the code
})

我创建了一个中间件并在主 app.js 文件中使用它，它神奇地工作。我完全不知道为什么，但它确实有效。

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
};

app.use(allowCrossDomain);

【讨论】：

大声笑...这很有趣...:)