### Chrome 浏览器中 Payload 的 Form Data 不显示的原因及解决方法 在使用 Chrome 浏览器调试工具时，可能会遇到某些情况下无法看到 `Form Data` 或 `Request Payload` 的内容。以下是可能导致此问题的原因以及对应的解决方法。 #### 1. **Content-Type 设置错误** 如果请求的 `Content-Type` 被设置为 `application/json`，则 Chrome 调试工具会将请求体解析为 `Request Payload` 而不是 `Form Data`[^3]。这是因为 `Form Data` 通常与 `application/x-www-form-urlencoded` 或 `multipart/form-data` 相关联，而 `application/json` 则表示 JSON 格式的请求体。 **解决方法：** - 如果需要查看 `Form Data`，请确保请求头中的 `Content-Type` 设置为 `application/x-www-form-urlencoded` 或 `multipart/form-data`。 - 示例代码： ```javascript axios.post(url, data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` #### 2. **未正确序列化数据** 当使用 `application/json` 作为 `Content-Type` 时，如果未对数据进行 `JSON.stringify` 序列化，则后端可能无法正确解析数据，同时前端调试工具可能不会显示完整的 `Request Payload`[^5]。 **解决方法：** - 确保在发送 JSON 数据时对其进行序列化处理。 - 示例代码： ```javascript axios.post(url, JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); ``` #### 3. **跨域请求导致 OPTIONS 预检请求** 在跨域请求中，浏览器会自动发送一个 `OPTIONS` 请求作为预检（preflight）。如果服务器未正确配置 CORS 头部，可能会导致实际的 POST 请求未被发送，从而无法在调试工具中看到 `Form Data` 或 `Request Payload`[^1]。 **解决方法：** - 确保服务器端正确配置了 CORS 头部，允许跨域请求。 - 示例代码（服务器端 CORS 配置）： ```javascript res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); ``` #### 4. **请求体为空** 如果请求体为空，则无论 `Content-Type` 如何设置，Chrome 调试工具都不会显示 `Form Data` 或 `Request Payload`[^2]。 **解决方法：** - 确保请求体中包含有效数据。 - 示例代码： ```javascript const data = { key1: 'value1', key2: 'value2' }; axios.post(url, data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` #### 5. **使用 Axios 时未正确转换数据格式** 在使用 Axios 发送请求时，默认情况下会将数据序列化为 JSON 格式。如果需要发送 `application/x-www-form-urlencoded` 格式的数据，则需要手动转换数据格式[^4]。 **解决方法：** - 使用 `transformRequest` 方法将数据转换为 URL 编码格式。 - 示例代码： ```javascript axios.post(url, data, { transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` --- ###