前后端分离中fetch发送post请求

问题描述

前后端分离的项目中，前端JavaScript使用fetch发送post请求如何携带表单数据以及请求头、跨域等问题。

解决方法

  1. 使用FormData创建表单数据

    1
    2
    3
    let formDatas = new FormData();
    formDatas.append('username',username);
    formDatas.append('password',password);

    使用FormData表示的表单数据，fetch会自动序列化为json

  2. 在fetch中设置请求方法为post

    1
    2
    3
    4
    5
    6
    fetch(`http://localhost:8022/user/checkLogin`,{
            method:'POST', //方法设为post
            mode: 'cors',
            body: formDatas //body将formData传过去
        })
    .then

  3. 关于请求头、跨域问题解决

    • 在fetch请求中，不要自己设置请求头，否则可能会出错
    • 关于跨域：fetch设置中添加mode: 'cors'