Nodejs ajax post 请求后台，提交form data的时候能进路由，可用json 数据提交就报404了，用的是express

Nodejs ajax post 请求后台，提交form data的时候能进路由，可用json 数据提交就报404了，用的是express

5 回复

Nodejs ajax POST请求后台，提交form data的时候能进路由，但使用JSON数据提交时报404错误，使用的是Express

问题描述：

我正在开发一个使用Node.js和Express的应用程序。在前端，我使用jQuery的$.ajax方法发送POST请求。当我在请求中提交表单数据（FormData）时，能够成功进入后端路由。然而，当我尝试提交JSON数据时，后端返回404错误。

原因分析：

这个问题通常是由于请求的Content-Type设置不正确或者路由配置不正确导致的。在Express中，默认情况下，只有通过application/x-www-form-urlencoded或multipart/form-data编码的数据会被解析。如果你直接发送JSON数据，Express可能无法正确识别这些数据，从而导致404错误。

解决方案：

  1. 确保Content-Type设置正确： 在发送JSON数据时，需要将Content-Type设置为application/json。

  2. 安装并使用body-parser中间件： body-parser是一个常用的中间件，用于解析请求体中的数据。你需要确保已经安装了body-parser并正确地应用到了你的Express应用中。

示例代码：

首先，确保你已经安装了body-parser：

npm install body-parser

然后，在你的Express应用中引入并使用body-parser：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用body-parser中间件来解析JSON数据
app.use(bodyParser.json());

// 示例路由
app.post('/submit', (req, res) => {
    console.log(req.body); // 这里可以打印出请求体中的数据
    res.send('Data received!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

接下来，前端使用jQuery发送JSON数据的示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="submit">Submit JSON Data</button>

<script>
$(document).ready(function() {
    $('#submit').click(function() {
        const data = {
            key1: 'value1',
            key2: 'value2'
        };

        $.ajax({
            url: '/submit',
            type: 'POST',
            contentType: 'application/json', // 设置正确的Content-Type
            data: JSON.stringify(data), // 将JavaScript对象转换为JSON字符串
            success: function(response) {
                console.log('Success:', response);
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    });
});
</script>

总结：

通过正确设置请求头的Content-Type为application/json，并确保在服务器端使用body-parser中间件来解析JSON数据，可以解决Node.js Express应用中JSON数据提交时报404错误的问题。


url 不一样？

细节呢? 有没有报错? 对应代码用了什么?

路由没有正确匹配，可以看一下http://www.csser.com/board/4f77e6f996ca600f78000936

当使用 Node.js 和 Express 处理 AJAX POST 请求时，如果提交 FormData 能成功进入路由，但使用 JSON 数据提交时报 404 错误，通常是因为请求的内容类型（Content-Type）没有正确设置或解析。

原因分析

  1. Content-Type 设置不正确：当你通过 AJAX 发送 JSON 数据时，需要确保 Content-Type 被设置为 application/json。否则，Express 可能无法正确解析请求体。
  2. 缺少中间件：如果你希望解析 JSON 请求体，你需要在 Express 中添加一个中间件来处理它，例如 body-parser 或者内置的 express.json()。

解决方案

示例代码

const express = require('express');
const app = express();

// 使用 express.json() 中间件来解析 JSON 请求体
app.use(express.json());

app.post('/submit', (req, res) => {
    console.log(req.body); // 应该打印出请求中的 JSON 数据
    res.send('Data received');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST Request</title>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const data = {
                name: 'John Doe',
                age: 30
            };

            fetch('/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.text())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

关键点

  • express.json() 中间件：这个中间件用于解析 JSON 格式的请求体。
  • Content-Type 设置：确保在发送 JSON 数据时，Content-Type 设置为 application/json。

通过这些步骤，你可以确保 Node.js 后端能够正确接收和解析 JSON 格式的 POST 请求。

回到顶部