Is there a problem with modifying Content-Type to convert request payload to from data format?

async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await login({
            username: this.loginForm.username,
            password: hexMD5(this.loginForm.password)
          });
          console.log(res);
      });
    }
import {
  baseUrl
} from "./env"

export default async (url = "", data = {}, type = "GET", method = "fetch") => {
  type = type.toUpperCase();
  url = baseUrl + url;

  if (type == "GET") {
    let dataStr = ""; //
    Object.keys(data).forEach(key => {
      dataStr += key + "=" + data[key] + "&";
    })

    if (dataStr !== "") {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
      url = url + "?" + dataStr;
    }
  }

  if (window.fetch && method == "fetch") {
    let requestConfig = {
      credentials: "include",
      method: type,
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      },
      mode: "cors",
      cache: "force-cache"
    }

    if (type == "POST") {
      Object.defineProperty(requestConfig, "body", {
        value: JSON.stringify(data)
      })
    }

    try {
      const response = await fetch(url, requestConfig);
      const responseJson = await response.json();
      return responseJson
    } catch (error) {
      throw new Error(error)
    }
  } else {
    return new Promise((resolve, reject) => {
      let requestObj;
      if (window.XMLHttpRequest) {
        requestObj = new XMLHttpRequest();
      } else {
        requestObj = new ActiveXObject;
      }

      let sendData = "";
      if (type == "POST") {
        sendData = JSON.stringify(data);
      }

      requestObj.open(type, url, true);
      requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      requestObj.send(sendData);

      requestObj.onreadystatechange = () => {
        if (requestObj.readyState == 4) {
          if (requestObj.status == 200) {
            let obj = requestObj.response
            if (typeof obj !== "object") {
              obj = JSON.parse(obj);
            }
            resolve(obj)
          } else {
            reject(requestObj)
          }
        }
      }
    })
  }
}

now fetch is a format that cannot be received in the background

request payload

{"username":"circle","password":"9b6ddeba5b33e577c07c35d8505c6072"}: 

this is ajax POST, and this is the format that the background can receive from the picture

form data

username: circle
password: 9b6ddeba5b33e577c07c35d8505c6072

< H2 > I would like to ask how to modify it so that the backend POST can receive the parameters when receiving them < / H2 >
May.28,2021

how to modify it to enable the backend to receive parameters when POST

< del > from network , there is nothing wrong with your front end, but the problem becomes that the back end cannot receive parameters, so what can the back end handle content-type ? (this is a problem of interface definition. Other people's definition does not accept form data what's the use of sending it.) < / del >

at first I thought you were a screenshot of sending a request, but it turned out to be a successful example given by the background. no, no, no.
of course there is a problem. application/x-www-form-urlencoded sends data in the format of a=b&c=d , while you send a json string, you can use the qs module to change it.

      if (type == 'POST') {
        sendData = JSON.stringify(data);
      }

      requestObj.open(type, url, true);
      requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      requestObj.send(sendData);

then later on about Network , if you have any unsuccessful questions, please take a screenshot and send it out to see what you have sent.


Let's see, we should use the FormData function:

let data=new FormData()
data.append('username','circle')
data.append('password','fffffffff')

then use data directly


ask the same question! A request encapsulated by fetch can only be sent to Request Payload,. How can it be changed to formData format in fetch encapsulation?

Menu