使用Vue怎么解决跨域请求问题?

最新推荐文章于 2024-09-08 11:14:16 发布

软哈哈

最新推荐文章于 2024-09-08 11:14:16 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/qq_40198420/article/details/103772576

版权

在使用vue前先看原生js解决跨域

使用的接口:http://suggestion.baidu.com/su?cb=qq&wd=哈哈
body内容:

 <input type="text">
    <button>提交</button>
    <ul></ul>
    <script>
    //查找对应的表单元素
        var ipt = document.getElementsByTagName("input")[0];
        var btn = document.getElementsByTagName("button")[0];
        var oul = document.getElementsByTagName("ul")[0];
	//给btn添加点击事件
        btn.onclick = function () {
       		//当点击按钮的时候利用script的src属性提交请求→新建一个script标签
            var s = document.createElement("script");
            //给这个标签的src属性赋值 赋值时在wd后面的参数是需要查找的关键字,这个值是用户在input中输入的值
            s.src = `http://suggestion.baidu.com/su?cb=callback&wd=${ipt.value}`
            //最后将这个script标签添加到body中
            document.body.append(s)
        }
	//在src中提交的接口连接中有一个回调函数,需要自己来设置
        function callback(res) {
        	//在这个回到函数中的res参数是传递过来搜索到的结果
            for (let i = 0; i < res.s.length; i++) {
            	//循环遍历并创建li标签
                var li = document.createElement("li");
                //给li中添加查找到的内容
                li.innerHTML = res.s[i];
                //将li添加到ul中
                oul.append(li)
            }
        }
    </script>

上述代码就可以实现一个简单的跨域请求,这是以原生js的方法实现的

使用vue来模拟一个跨域请求

解决跨域请求的核心是用script标签的src,script的请求时不受限制的
使用的接口:http://suggestion.baidu.com/su?cb=qq&wd=哈哈

<body>
    <div id="app">
        <input type="text" v-model="ipt">
        <button @click="submit()">提交</button>
        <ul>
        	//for循环遍历result中的数据 {{val}}显示遍历的数据
            <li v-for="(val, index) in result" :key="index">{{val}}</li>
        </ul>
    </div>

    <script>
    	//将实例化的vue存储
        var vue = new Vue({
            el: "#app",
            data: {
                ipt: "",
                result: []
            },
            methods: {
                submit() {
                	//这里步骤与原生js一样操作
                    var s = document.createElement("script");
                    s.src = `http://suggestion.baidu.com/su?cb=callback&wd=${this.ipt}`
                    document.body.append(s)
                }
            },
        })

        function callback(res) {
        //vue中的result属性是查找到数据的长度,将res.s返回的数据存入
            vue.result = res.s
        }
    </script>
</body>