You are here
vue ajax请求头Content-Type指定参数的几种格式：form-data、x-www-form-urlencoded、application/json、json，并在node中接收转发到目标服务器 有大用 有大大用 有大大大用
个人blog，欢迎关注加收藏
后台需要formData数据（表单数据）：
“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数据处理为字符串式表单数据
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
});
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
“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>
1
2
3
4
5
传送的数据一般为文件、图片等数据，此时，需要对数据进行如下处理：
```
//在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;
}
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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);
});
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
在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();
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
哦耶耶耶耶
关注
————————————————
版权声明：本文为CSDN博主「哦耶耶耶耶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42894622/article/details/90070533
来自 https://blog.csdn.net/qq_42894622/article/details/90070533