FormData 可以安全传输 HTML 字符串（如 Bold Text），但需确保请求头未被错误覆盖、不手动设置 Content-Type，且服务端能正确解析 multipart 表单数据。本文详解正确用法、典型错误及调试建议。
formdata 可以安全传输 html 字符串（如 `bold text`），但需确保请求头未被错误覆盖、不手动设置 `content-type`，且服务端能正确解析 multipart 表单数据。本文详解正确用法、典型错误及调试建议。
在使用 fetch 通过 FormData 提交包含 HTML 片段（例如 <b>Bold Text</b>）的数据时，核心原则是：让浏览器自动设置正确的 Content-Type 头（即 multipart/form-data; boundary=...）。一旦手动指定 contentType: false（或类似 jQuery 风格配置）、显式设置 Content-Type，或混用 JSON 序列化逻辑，就会导致请求失败或后端无法解析。
你原始代码中的关键问题在于：
- ❌
processData: false和contentType: false是 jQuery AJAX 的选项，在原生fetch中完全无效且被忽略，属于误用； - ❌ 若在
headers中手动设置了'Content-Type': 'application/json'（如答案示例中所示），会与FormData冲突——FormData必须由浏览器自动生成带 boundary 的multipart/form-data头； - ✅ 正确做法：仅传入
body: formData，不设置headers，不干预Content-Type。
✅ 正确示例代码如下：
const formData = new FormData();
formData.append('sponsor', 'My sponsor');
formData.append('rider', 'xRider');
formData.append('delegation', '<b>Bold Text</b>'); // ✅ HTML 字符串可直接 append
fetch(request_url, {
method: 'POST',
body: formData // ✅ 关键：不设 headers，不设 contentType，不 stringify
})
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => {
console.log('Working correctly:', data);
})
.catch(error => {
console.error('%c Fetch Error: ', 'background: #000; color: #bada55', error);
call_back_function({ status: 'failed', data: error });
});
⚠️ 注意事项：
-
HTML 字符串无需转义：
formData.append()会自动处理二进制/文本边界，<b>Bold Text</b>作为纯字符串可安全传输； -
服务端必须支持 multipart 解析：如 Express 需使用
multer，PHP 直接读$_POST和$_FILES，Python Flask 用request.form.get('delegation')； -
避免混合数据类型陷阱：不要把
FormData和JSON.stringify()混用（如答案中提供的NewPost函数适用于 JSON 场景，不适用于 FormData）； -
调试技巧：在浏览器 Network 面板中检查请求的
Headers → Request Headers → Content-Type，确认其值为multipart/form-data; boundary=----WebKitFormBoundary...，而非application/json或空值。
? 总结：发送 HTML 内容到后端 via FormData 完全可行，成败关键在于「信任浏览器」——只构造 FormData，只传 body，其余全部交由 fetch 自动处理。任何手动干预 Content-Type 或误用 jQuery 配置项，都是常见故障根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
