axios、ajax 发post、get请求对后端接口的跨域测试验证。

最新推荐文章于 2024-08-20 13:21:28 发布

小鹿的

最新推荐文章于 2024-08-20 13:21:28 发布

阅读量1.4k

点赞数

分类专栏：前端 Django 文章标签： ajax 后端前端 axios

本文链接：https://blog.csdn.net/yutu75/article/details/122170942

版权

Django 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

axios发请求

日常开发是postman测接口，不需要跨域一样能拿到数据。
但是生产模式里不行，需要完善请求头，前端解决不了，后端处理。

后端Django解决跨域请求的问题：
参考：https://blog.csdn.net/audi_888888/article/details/101872872

axios和ajax发请求html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios跨域测试</title>
</head>
<body>

<div id="app">
    <button @click="qwq_ax">axios好看的按钮</button>
    <button @click="qwq_aj">ajax好看的按钮</button>
    <p>{{ax_text}}</p>
    <hr>
    <p id="aj_text">还没显示呢亲</p>
</div>


</body>
<!--<script src="vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!--<script src="jquery.js"></script>-->
<!--<script src="axios.js"></script>-->

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    // 请求需要携带的参数
    var data = {
        "text_data": "{'data':[['男', 100],['女',200]]}",
        "color_data": "Reds_r",
        "ciyun_template": "static/img_template/ps2.png",
        "font_name": "STHUPO.TTF",
        "color_switch": "turbo",
        "min_font_size": "4",
        "max_font_size": "100",
        "max_words": "200"
    }


    let vm = new Vue({
        el: '#app',
        data() {
            return {
                ax_text: '还没显示呢亲',
            }
        },
        created() {
        },
        methods: {
            qwq_ax() {
                // axios.get('http://192.168.43.134:8000/dyapi/get_colors/', {
                //         params: {data}
                //     }
                // )
                axios.post('http://192.168.43.134:8000/dyapi/get_wordcloud/', data
                )
                    .then((res) => {
                        console.log(res);
                        this.ax_text = "axios===>:" + JSON.stringify(res.data)
                    })
                    .catch((err) => {
                        console.log(err);
                        this.ax_text = "axios===>:" + JSON.stringify(err.data)
                    })
            },
            qwq_aj() {
                var c = ''
                $.ajax({
                    url: 'http://192.168.43.134:8000/dyapi/get_wordcloud/',
                    type: 'post',
                    data: data,
                    success: function (res) {
                        console.log(res, typeof res) //获取服务端发送的数据
                        document.getElementById("aj_text").innerHTML = "ajax===>:" + JSON.stringify(res);

                    },
                    error: function (res) {
                        console.log(res, typeof res) //获取服务端发送的数据
                        document.getElementById("aj_text").innerHTML = "ajax===>:" + JSON.stringify(res);
                    }
                })

            },
        }
    })

</script>
</html>