怎么用js向服务器发送请求数据类型

js向服务器发送请求的数据类型由Content-Type请求头决定，常见有URL查询参数、表单编码、JSON、FormData、Blob五种，选错类型会导致后端解析失败或数据丢失。

js怎么向服务器发送请求：先搞懂数据类型

很多前端开发者写接口联调时遇到过这种场景：后端说收不到参数，前端查看Network面板发现请求已经发出去了，但响应一直报400或500，问题往往不在请求地址，而在请求数据类型没配对，js向服务器发送请求时，数据不会自动变成后端想要的样子，必须显式设置Content-Type,让服务器知道按什么格式解析请求体。

加载中

HTTP 发送接收JSON数据

丁老师的技术随笔

15198-

原视频地址

请求数据类型的本质是Content-Type

浏览器发送HTTP请求时，请求头里会带一个Content-Type字段，这个字段告诉服务器：请求体里的内容是什么格式，如果前端发的是JSON字符串却把Content-Type设成text/plain，很多后端框架不会主动按JSON解析,参数自然读不到。

据MDN文档，Content-Type的常见取值包括：

• application/x-www-form-urlencoded
• application/json
• multipart/form-data
• text/plain
• application/octet-stream

这几种类型对应的数据格式完全不同,代码写法也不一样。

URL查询参数：最简单但不适合大段数据

GET请求通常没有请求体，参数直接拼在URL后面，例如/api/user?id=123&name=老王，这类数据叫查询参数，不算请求体，所以不需要设置Content-Type。

在js里可以用URLSearchParams构造：

const params = new URLSearchParams({ id: '123', name: '老王' });
fetch(`/api/user?${params}`);

这种方式适合查询、筛选、分页等场景，参数长度受浏览器和服务器限制，一般不超过几KB，如果参数里包含敏感信息，不要用GET,因为URL会被记录在日志和浏览器历史里。

表单编码：传统表单提交的默认格式

application/x-www-form-urlencoded是HTML表单默认提交格式，数据会被编码成key=value&key2=value2的字符串放在请求体里,中文和特殊字符会经过URL编码。

用原生js发送：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'username=老王&password=123456'
});

也可以用URLSearchParams自动处理编码：

const body = new URLSearchParams({ username: '老王', password: '123456' });
fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body
});

国内前端开发中，这种格式常见于传统后端框架如Spring MVC、ASP.NET的默认表单接收方式，如果后端接口用@RequestParam或request.form取值，就必须用这个类型,发JSON反而收不到。

JSON数据类型：前后端分离的主流选择

application/json是目前前后端分离项目里使用最多的请求数据类型，请求体是一个合法的JSON字符串,后端框架会自动反序列化成对象。

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '老王', age: 30 })
});

需要注意三个常见错误：

• 忘记JSON.stringify，直接把对象传给body，发出的是[object Object]
• 设置了Content-Type: application/json但body不是合法JSON字符串
• 后端接口没有配置JSON解析器，导致读不到参数

FormData：文件上传和数据混合提交

multipart/form-data专门用于文件上传或二进制数据与普通字段混合提交，不需要手动设置Content-Type，浏览器会自动添加boundary边界字符串。

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('nickname', '老王');
fetch('/api/upload', {
  method: 'POST',
  body: formData
});

这里有一个关键点：不要手动设置Content-Type请求头，如果手动设置成multipart/form-data但缺少boundary参数，服务器无法正确分割文件数据，上传会失败,让浏览器自动处理才最稳妥。

Blob和ArrayBuffer：二进制数据直传

当需要上传图片、音频、视频等二进制文件，但又不想用FormData时，可以直接发Blob或ArrayBuffer。Content-Type设置成application/octet-stream表示通用的二进制流。

const blob = new Blob([binaryData], { type: 'image/png' });
fetch('/api/upload-binary', {
  method: 'POST',
  headers: { 'Content-Type': blob.type },
  body: blob
});

这种方式适合文件切片上传、WebSocket二进制消息、Canvas导出图片等场景，相比FormData，它更轻量,但不能同时携带普通字段。

不同请求方式怎么设置js向服务器发送请求的数据类型

js发送HTTP请求主要有三种方式：原生XMLHttpRequest、fetch、第三方库axios,它们在设置数据类型时的写法差异较大。

XMLHttpRequest设置Content-Type

XMLHttpRequest是较老的API，但很多老项目仍在用，需要手动调用setRequestHeader：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: '老王' }));

如果是FormData，则不能设置Content-Type，否则会覆盖浏览器自动生成的boundary。

fetch设置Content-Type

fetch基于Promise，代码更简洁，设置数据类型同样通过headers字段：

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '老王' })
});

fetch不会自动序列化对象，也不会自动设置JSON头,所以每一步都要写清楚。

axios设置Content-Type

axios在请求数据类型处理上比fetch更智能，默认情况下，如果data是普通对象，axios会自动设置Content-Type: application/json

并序列化：

axios.post('/api/user', { name: '老王', age: 30 });

这行代码不需要手动JSON.stringify，不需要手动设置头，如果传的是FormData，axios也会自动识别并设置正确的multipart/form-data。

axios post请求数据类型怎么选：实战对比

很多人在国内前端开发中用axios做请求封装，但遇到后端报参数缺失时不知道如何排查，核心就是看axios默认行为与后端期望是否一致。

默认JSON与后端表单接收的冲突

假设后端接口用Spring MVC的@RequestParam接收参数，期望表单编码,前端用axios默认写法：

axios.post('/api/login', { username: '老王', password: '123456' });

axios会自动发JSON，Content-Type为application/json，后端按表单解析，拿不到参数，返回400或空值,解决办法是显式指定表单编码：

const params = new URLSearchParams({ username: '老王', password: '123456' });
axios.post('/api/login', params);

或者用qs库序列化：

const qs = require('qs');
axios.post('/api/login', qs.stringify({ username: '老王', password: '123456' }));

文件上传时axios的设置

用axios上传文件,推荐直接传FormData对象：

const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData);

axios会自动设置Content-Type为multipart/form-data并带上boundary，如果手动设置头,反而容易出错。

不同数据类型的适用场景对比表

fetch和axios区别在请求数据类型上的体现

很多初学者会问fetch和axios区别在哪里，单从请求数据类型处理看,差异就很明显。

自动序列化能力

axios会自动序列化普通对象为JSON，并设置对应的Content-Type。fetch不会，必须手动JSON.stringify和设置头,这是两者在请求数据类型上最大的使用差异。

错误处理与拦截器

axios可以在拦截器里统一修改请求数据类型，比如全局设置表单编码或JSON格式。fetch没有拦截器，只能在每次请求时单独配置，项目一旦涉及多种数据类型切换,axios的封装优势会更突出。

体积与依赖

fetch是浏览器原生API，不需要安装任何包，axios需要额外引入，但体积很小，且可以在Node.js环境使用，如果只是简单请求，用

fetch足够；如果涉及复杂配置和统一处理,axios更省心。

根据行业共识，现代浏览器的fetch已经可以覆盖大多数请求场景，但在请求数据类型自动处理、超时控制、取消请求等方面,axios仍然提供了更完善的封装。

js上传文件到服务器必须用multipart/form-data吗

不是必须。multipart/form-data是最常见的文件上传格式，但不是唯一选择,前端可以根据后端接口设计选择不同方式。

直接上传二进制流

如果后端接口只接收纯二进制，不接收额外字段，可以用Blob或File对象直接发送：

const file = fileInput.files[0];
fetch('/api/upload-binary', {
  method: 'POST',
  headers: { 'Content-Type': file.type },
  body: file
});

这种方式请求体就是文件本身的二进制内容，不包含任何文件名或字段信息,文件名需要通过URL参数或自定义请求头传递。

Base64编码上传

小文件可以转成Base64字符串,放在JSON里发送：

const reader = new FileReader();
reader.onload = () => {
  const base64 = reader.result.split(',')[1];
  fetch('/api/upload-base64', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fileName: file.name, data: base64 })
  });
};
reader.readAsDataURL(file);

这种方式会增大数据体积，一般用于图片预览、小图标上传等场景,不适合大文件。

分片上传

大文件上传通常切成多个小块，用application/octet-stream逐片发送，最后合并，每片请求体是纯二进制，参数通过URL或自定义头传递，这比FormData更适合断点续传、进度显示、并发上传。

Q&A：js向服务器发送请求数据类型常见疑问

js向服务器发送请求数据类型选错了会怎样

选错数据类型最常见的后果是后端读不到参数，比如后端用@RequestBody接收JSON，前端却发表单编码，后端可能直接返回400或415状态码，另一种情况是文件上传时手动设置Content-Type漏掉boundary，服务器无法正确分割文件，导致文件损坏，排查时先看Network面板的Request Headers里的Content-Type是否和后端约定一致。

fetch和axios在处理js向服务器发送请求的数据类型时谁更省心

axios更省心，它自动序列化普通对象为JSON，自动识别FormData并设置正确的Content-Type，还支持拦截器统一处理数据类型。fetch每一步都需要手动配置，容易遗漏，不过fetch作为原生API没有额外依赖，如果只是简单请求且数据类型固定，用fetch也可以。

js向服务器发送请求的数据类型是否必须和后端框架严格对应

是的，必须严格对应，后端框架的注解或配置决定了它如何解析请求体，比如Spring MVC中@RequestBody对应JSON，@RequestParam对应表单编码或查询参数，文件上传对应MultipartFile，前端发送的Content-Type必须与后端解析方式匹配，否则参数无法绑定到方法参数上,这是前后端联调中最基础的约定。