fetch post formData

发表于 | 分类于

当使用fetch用表单的方式post json类型的数据时候，需要注意几个问题

设置header 的 ‘Content-Type’,’application/x-www-form-urlencoded;charset=utf-8’

序列化json

尝试过多种方式，需要处理成 ‘username=admin&password=password’这种方式才能被正确的识别成 formData格式，可以在浏览器查看具体的请求体
采用类似 new FormData() 方式会被处理成——WebKitFormBoundary

具体示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//序列化json
const formBody = Object.keys(paramsArray).map(key=>encodeURIComponent(key)+'='+encodeURIComponent(paramsArray[key])) .join('&');

var headers = new Headers();
headers.set('Content-Type','application/x-www-form-urlencoded;charset=utf-8');

fetch('api/auth/login',{
    method:'post',
    mode:'cors',
    credentials: "include",
    headers,
    body: formBody
}).then((response)=>{
    return response.json(); 
}).then((responseData)=>{
    console.log(responseData);
});

参考：
四种常见的 POST 提交数据方式
how to post a x-www-form-urlencoded request from react-native
How to make a post request with JSON data in application/x-www-form-urlencoded