axios03-解决请求头兼容导致跨域报错问题
Posted 坤小
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios03-解决请求头兼容导致跨域报错问题相关的知识,希望对你有一定的参考价值。
不同版本接口区别 | 老版本接口(form形式) | 新版本接口(json形式) |
---|---|---|
请求头 | application/x-www-form-urlencoded | application/json;charset=UTF-8 |
参数格式 | 序列化字符串: key1=value1&key2=value2 | json格式字符串 :key1:value1 |
接口请求头和参数错误提示 | (1)服务器返回:参数错误 (2)状态码400 | (1)服务器返回:参数错误 (2)状态码400 (3)跨域报错 |
-
1.老版本的后台接口post请求头是:
application/x-www-form-urlencoded
-
axios不支持
-
解决方案
-
1.设置axios请求头为
application/x-www-form-urlencoded
-
headers: 'Content-type': 'application/x-www-form-urlencoded'
-
-
2.将参数拼接为:key1=value1&key2=value2
- 使用qs第三方包来拼接:
Qs.stringify(username: 'zxk')
- qs网站:https://www.npmjs.com/package/qs
- 使用qs第三方包来拼接:
-
-
-
2.新版本的后台接口post请求头是:
application/json;charset=UTF-8
- axios默认支持,不需要任何处理
/*
1.学习目标介绍 : axios解决post请求兼容性问题
2.学习路线 :
(1)post请求头类型
a.在很久很久以前,ajax技术没有发明以前,浏览器发送请求
使用的是form表单来发送,form表单默认的请求头是:application/x-www-form-urlencoded
b.后来ajax技术发明之后,由于之前的服务器处理post请求都是按照表单的默认请求头方式来处理
所以,ajax发送post请求,一般也设置请求头为:application/x-www-form-urlencoded
c. axios技术发明之后,此时json数据格式传输已经越来越流行,所以在axios中
post请求默认的请求头是:'Content-Type: application/json;charset=UTF-8'
d. 不同的请求头,服务器在处理的时候方式不一样。所以前后端必须要统一
总结:
a. 老接口的post请求头是:application/x-www-form-urlencoded
这种方式参数会以: 'key1=value1&key2=value2'形式传输
后台处理方式:字符串切割获取参数
b. 新接口的post请求头是: application/json;charset=UTF-8
这种方式参数会以json格式传输: '"key":"value"'
这种方式处理:JSON.parse()解析
(2)axios解决post请求兼容性
a. 如果你的后台是新接口,则不需要任何处理。(axios默认json格式)
b. 如果你的后台是老接口
(1)需要设置axios的请求头为:application/x-www-form-urlencoded
(2)需要将参数转为拼接方式:key1=value1&key2=value2
(3)使用axios后如何判断后台是老接口还是新接口?
a. 有的服务器会返回一段文本提示你:参数格式错误
b. 有的服务器直接返回400错误码,也是提示你参数格式错误
c. 有的服务器会直接报错跨域
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">点我发送post请求(老接口)</button>
<button id="btn2">点我发送post请求(新接口)</button>
<!-- 导入axios -->
<script src="./axios.js"></script>
<script src="./qs.js"></script>
<form action="" enctype="application/x-www-form-urlencoded"></form>
<script>
/*
1.学习目标介绍 : axios解决post请求兼容性问题
2.学习路线 :
(1)post请求头类型
a.在很久很久以前,ajax技术没有发明以前,浏览器发送请求
使用的是form表单来发送,form表单默认的请求头是:application/x-www-form-urlencoded
b.后来ajax技术发明之后,由于之前的服务器处理post请求都是按照表单的默认请求头方式来处理
所以,ajax发送post请求,一般也设置请求头为:application/x-www-form-urlencoded
c. axios技术发明之后,此时json数据格式传输已经越来越流行,所以在axios中
post请求默认的请求头是:'Content-Type: application/json;charset=UTF-8'
d. 不同的请求头,服务器在处理的时候方式不一样。所以前后端必须要统一
总结:
a. 老接口的post请求头是:application/x-www-form-urlencoded
这种方式参数会以: 'key1=value1&key2=value2'形式传输
后台处理方式:字符串切割获取参数
b. 新接口的post请求头是: application/json;charset=UTF-8
这种方式参数会以json格式传输: '"key":"value"'
这种方式处理:JSON.parse()解析
(2)axios解决post请求兼容性
a. 如果你的后台是新接口,则不需要任何处理。(axios默认json格式)
b. 如果你的后台是老接口
(1)需要设置axios的请求头为:application/x-www-form-urlencoded
(2)需要将参数转为拼接方式:key1=value1&key2=value2
(3)使用axios后如何判断后台是老接口还是新接口?
a. 有的服务器会返回一段文本提示你:参数格式错误
b. 有的服务器直接返回400错误码,也是提示你参数格式错误
c. 有的服务器会直接报错跨域
*/
//post请求:老接口
/*
1.设置请求头:
headers: 'Content-type': 'application/x-www-form-urlencoded'
2.将参数转为字符串拼接方式
一般使用第三库qs来转换
*/
btn1.onclick = function ()
//(1)使用第三方库 qs来转换参数格式(推荐)
let str1 = Qs.stringify(username: 'zxk');
console.log(str1);
//(2)使用js原生对象URLSearchParams来处理 (好处:不需要导入Qs库)
// var param = new URLSearchParams();
// param.append('username','zxk');
axios(
url: 'https://autumnfish.cn/api/user/check',
method: 'post',
data: str1,
headers: 'Content-type': 'application/x-www-form-urlencoded'
).then(res =>
console.log(res);
)
;
//post请求:新接口
//不需要任何处理
btn2.onclick = function ()
axios(
url: 'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
method: 'post',
data:
mobile: '18801185985',
code: '246810'
,
).then(res =>
console.log(res);
)
;
</script>
</body>
</html>
以上是关于axios03-解决请求头兼容导致跨域报错问题的主要内容,如果未能解决你的问题,请参考以下文章
Access to Image at 'file:///Users canvas本地图片跨域报错解决方案
vue axios 跨域请求在ie浏览器 报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.