axios03-解决请求头兼容导致跨域报错问题

Posted 2022-12-10 坤小

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
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-解决请求头兼容导致跨域报错问题的主要内容，如果未能解决你的问题，请参考以下文章

canvas.toDataURL 由于跨域报错的解决方法

iOS解决跨域问题

Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

vue axios发送post请求，怎么设置请求头解决跨域

vue axios 跨域请求在ie浏览器报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.

vue 解决axios请求出现前端跨域问题