fetch 配合 express 使用req body为空

2022-05-17 607

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近用 node 写后端接口前端使用fetch,遇到个问题记录如下使用fetch进行post请求的时候,后端node 使用express框架进行body接收的时候始终是个空对象 {}

1. 前言

最近用 node 写后端接口前端使用fetch,遇到个问题记录如下

使用fetch进行post请求的时候,后端node 使用express框架进行body接收的时候始终是个空对象 {}

2.后端代码

const express = require('express');
let app = express()
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencod
//*************post 
app.post("/login",(req,res)=>{
    console.log("post------body",req.body)
    res.json({msg:"登录成功",code:1000})
})

3.前端代码

<button onclick="loginFn()"> 登录 -post</button>

let loginFn = async () => {
            let res = await fetch("/login", {
                method: "POST",
                body: JSON.stringify({ name: "1-1-1" }),
            }).then(res => res.json())
            console.log("post 结果:", res)
        }

4. 解决办法配置请求头

headers 配置

let res = await fetch("/login", {
                method: "POST",
                body: JSON.stringify({ name: "yzs",password:"123456" }),
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                }
            }).then(res => res.json())

5.原因找到了 MDN

fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json())

body的数据类型必须和 content-Type匹配

但是这个fetch默认的类型是text/plain ,这个需要的是纯文本

所以必须手动设置请求头

headers: {
                   'Content-Type': 'application/json;charset=utf-8'
                }

6.扩展

key-value形式对应的 content-type配置

headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
    body: 'name=yzs&password=123456'

fetch 配合 express 使用req body为空

1. 前言

2.后端代码

3.前端代码

4. 解决办法配置请求头

5.原因找到了 MDN

6.扩展

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

fetch 配合 express 使用req body为空

1. 前言

2.后端代码

3.前端代码

4. 解决办法 配置请求头

5.原因 找到了 MDN

6.扩展

热门文章

最新文章

相关电子书

4. 解决办法配置请求头

5.原因找到了 MDN