个人blog，欢迎关注加收藏

后台需要formData数据（表单数据）：

1. “content-type”:“application/x-www-form-urlencoded”
   

   传送的数据为普通的key:value数据，表单输入框提交的数据默认为此种，前端处理如下：

   //main.js
   //引入node.js中的qs模块
   Vue.prototype.qs = require('qs') 
   //在vue组件的js中
   login(){
       let _this = this;
       let api = '/api/login';
       _this.user = {//用户信息
               uphone:"",//用户账号或手机号
               password:"",//登录密码
           };
       _this.axios.post(api,_this.qs.stringify(_this.user)）.then(res=>{
           console.log(res);
           });
       //注意，其中的_this.user就为普通的json数据,qs.stringify转化后参数为：‘uphone=aaa&password=85’
       //qs.stringify()将json数据处理为字符串式表单数据
   }
   

• node服务器接收：

const formidable = require('formidable');
const FormData = require('form-data');
const https = require('https');
const qs = require('qs');
app.post('/api/login',(req,res,next) => {
	// 解析从前端接收的 application/x-www-form-urlencoded 数据
	var form = new formidable.IncomingForm();
	from.parse(req,(err,fields) => {
		console.log('接收的数据...',fields);
		
		// 接收数据后用form-data传给目标服务器
		// 目标服务器需要 multipart/form-data 数据
		let fd = new FormData();
		fd.append('data',fields);
		let headers = fd.getHeaders(); // 这个不能少
		ajaxInNode('POST',api,fd,headers);
	});
})

3. “content-type”:“multipart/form-data”:常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctype 等于这个值。

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

传送的数据一般为文件、图片等数据，此时，需要对数据进行如下处理：
```
//在vue的js中
data(){
    return{
        params:{
            file:"",//上传文件
        }
    }
}
methods:{
    update(){
        let _this = this;
        let fd = _this.transformData(_this.params);
       let api = '/api/updateFile';
        _this.axios.post(api,fd,{
            headers:{
                "content-type":"multipart/form-data"
            }
            }）.then(res=>{
            console.log(res);
            }); 
    },
    // 转化为formdata格式
    transformData(obj){
        let _this = this;
        let fd = new FormData();
        Object.keys(obj).forEach(key=>{
            fd.append(key,obj[key]);
        });
        return fd;
    }
}
```

• node服务器接收：

app.post('/api/updateFile',(req,res,next) => {
	// 解析从前端接收的 multipart/form-data 数据
	var form = new formidable.IncomingForm();
	from.parse(req,(err,fields,files) => {
		console.log('接收的数据...',files);
		/**
		  <form action="/api/updateFile" method="post">
			<input type="file" name="upload"  value=""/>
			<input type="submit" id="" name="" />
		  </form>
		 */
		let {path,name} = files.upload; // 上传的文件对象
		console.log('path,name',path,name);
		// let fd = new FormData();
		// fd.append('data',files.upload);
		// let headers = fd.getHeaders(); // 这个不能少
		// ajaxInNode('POST',api,fd,headers);
	});
})

4. Request Payload 请求头部的 Content-Type: application/json，请求正文是一个 json 格式的字符串
   

• 后台需要json数据：适用于所有的ajax请求

    //在vue组件的js中
    login(){
        let _this = this;
        let api = '/api/login';
        _this.user = {//用户信息
                uphone:"",//用户账号或手机号
                password:"",//登录密码
            };
        _this.axios.post(api,_this.user）.then(res=>{
            console.log(res);
            });
    }

4. 在node中向目标服务器发送请求

function ajaxInNode(method,path,data = undefined,headers = {}){
	return new Promise(async resolve => {
		let options = {
			hostname:'projectx.lcdea.cn', // 目标服务器域名
			port:443, // 目标服务器端口
			path,
			method,
		} 
		options.headers = headers;
		!headers['content-type'] && (headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8');
		let req = https.request(options,res => {
			let body = '';
			res.setEncoding('utf-8');
			res.on('data',chunk => {
				body += chunk;
			});
			res.on('end',() => {
				if(res.headers['content-type'] === 'application/json'){
					resolve({body:JSON.parse(body),Cookie:res.headers['set-cookie']});
				}else{
					resolve(body,Cookie:res.headers['set-cookie']);
				}
			});
		});
		req.on('error',e =>{
			resolve({body:{success:false,message:e.message}});
		});
		if(data){
			// 目标服务器接收 multipart/form-data时参数处理方式
			if(headers['content-type'] && headers['content-type'].includes('multipart/form-data')){
				data.pipe(req);
			}else{
				// 目标服务器接收 application/x-www-form-urlencoded时参数处理方式
				const postData = qs.stringify(data);
				req.write(postData);
			}
		}
		req.end();
	});
}