鍍金池/ 問答/Java  Linux  HTML/ 修改Content-Type 讓request payload 轉(zhuǎn)from da

修改Content-Type 讓request payload 轉(zhuǎn)from data格式有問題？

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 = ''; //數(shù)據(jù)拼接字符串
    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)
          }
        }
      }
    })
  }
}

現(xiàn)在fetch是后臺接收不到的格式

request payload

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

這是ajax POST這是后臺能接收圖中的格式

form data

username: circle
password: 9b6ddeba5b33e577c07c35d8505c6072

圖片描述

請問怎么改造可以讓后臺POST時候收到收到參

回答
編輯回答
萌吟
請問怎么改造可以讓后臺POST時候收到收到參

從network看你前端本來就沒問題，而問題就變成后端接收不到參數(shù)，那么后端可以處理什么content-type呢？（這是接口定義的問題，人家定義不接受form data你發(fā)過去有啥用）

一開始以為你是發(fā)送請求的截圖，原來是后臺給的成功實例。。
當然有問題，application/x-www-form-urlencoded發(fā)送數(shù)據(jù)的格式是a=b&c=d，而你發(fā)的是json字符串，你可以用qs模塊轉(zhuǎn)一下。

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

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

然后以后有關Network的問題，有什么不成功請截個圖發(fā)出來才能看到你到底發(fā)送了什么。

2018年8月3日 14:17
編輯回答
刮刮樂

我想想，應該要使用FormData函數(shù):

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

然后直接使用data就行了

2017年1月19日 23:20