当你发出 POST 请求时，Content-Type 头指定了请求体的数据格式。常见的两种格式是 application/json 和 application/x-www-form-urlencoded。下面将详细解释这两种格式的区别及其对应的后端处理方式。

1. 数据格式的区别

1.1 application/json

• 格式：数据以 JSON 格式发送，通常是一个对象或数组的字符串表示。例如：

  {
      "username": "user1",
      "password": "pass123"
  }
  

• 使用场景：适用于发送复杂的数据结构，如嵌套对象、数组等。

1.2 application/x-www-form-urlencoded

• 格式：数据以键值对的形式发送，类似于 URL 查询字符串，键值对之间用 & 分隔。例如：

  username=user1&password=pass123
  

• 使用场景：主要用于简单的表单提交，兼容性好。

2. 后端处理方式

在 Express 服务器中，需要根据不同的 Content-Type 进行适当的解析。

2.1 处理 application/json

要解析 JSON 格式的请求体，需要使用 Express 的内置中间件 express.json()。

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

// 解析 JSON 格式的请求体
app.use(express.json());

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    // 处理登录逻辑
    res.json({ message: 'Login successful', username });
});

app.listen(port, () => {
    console.log(`Server running at <http://localhost>:${port}`);
});

2.2 处理 application/x-www-form-urlencoded

要解析 URL 编码的请求体，需要使用 express.urlencoded() 中间件。

javascript
复制代码
const express = require('express');
const app = express();
const port = 3000;

// 解析 x-www-form-urlencoded 格式的请求体
app.use(express.urlencoded({ extended: true }));

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    // 处理登录逻辑
    res.json({ message: 'Login successful', username });
});

app.listen(port, () => {
    console.log(`Server running at <http://localhost>:${port}`);
});

3. Vue 3 + Axios 示例

接下来，我们将使用 Vue 3 和 Axios 发送这两种格式的 POST 请求。

3.1 发送 application/json 格式的请求

<template>
    <div>
        <h1>Login</h1>
        <form @submit.prevent="login">
            <input v-model="username" placeholder="Username" required />
            <input v-model="password" type="password" placeholder="Password" required />
            <button type="submit">Login</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        async login() {
            try {
                const response = await this.$http.post('/api/login', {
                    username: this.username,
                    password: this.password
                }, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                console.log(response.data);
            } catch (error) {
                console.error('Login failed:', error);
            }
        }
    }
};
</script>