vue-resource 通过jsonp跨域获取,饿了么城市地址失败的问题?

发布于 2022-09-06 00:10:32 字数 3430 浏览 16 评论 0

vue-resource可以获取到百度,360搜索关键字的接口,却获取不到饿了么城市地址的接口?
详细问题见下方代码注释

clipboard.png

点击错误链接可以看到json数据其实已经获取到了

clipboard.png

饿了么城市数据接口查询失败?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource跨域取数据</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="kw" @keyup="search()" placeholder="请输入关键字">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>
</div>

<script>
    new Vue({
        el:"#box",
        data:{
            kw:"",
            items:""
        },
        methods:{
            search:function(){
                //我是完整接口地址:  https://www.ele.me/restapi/v2/pois?extras%5B%5D=count&geohash=ws105rz9smwm&keyword=a&limit=20&type=nearby
                this.$http.jsonp("https://www.ele.me/restapi/v2/pois",{
                    keyword:this.kw,   //关键字
                    geohash:"ws105rz9smwm",   //城市,
                    limit:5,
                    type:"nearby"
                },{
                    jsonp:'callback'   //怎么判断jsonp是否改名了,如何找到改名后的callback名呢????
            }).then(function(res){
                   this.items=res.data.s;
                   console.log(res.data.s);
                },function(res){
                    console.log(res.status);
                });
            }
        }
    })
</script>


</body>
</html>

百度关键字接口测试OK

   search:function(){
                //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=&csor=1&cb=jQuery110209546341864469152_1507385323426&_=1507385323429
                this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                    wd:this.kw
                },{
                    jsonp:'cb'  //jsonp中默认的callback等于"callback"
                }).then(function(res){
                   this.items=res.data.s;
                   console.log(res.data.s);
                },function(res){
                    console.log(res.status);
                });
            }

360搜索接口OK

  search:function(){
                //https://sug.so.360.cn/suggest?callback=jQuery18306664889150769138_1507386648055&encodein=utf-8&encodeout=utf-8&format=json&info=%7B%22q%22%3A%5B%22%25E9%25A6%2599%25E6%25B8%25AF%25E9%25B8%25BD%25E7%25AC%25BC%22%2C%22hanguo%2520%25E9%25B8%25BD%25E7%25AC%25BC%22%5D%2C%22id%22%3A%5B%2201506994852669%22%2C%2201506994838087%22%5D%7D&_=1507386655892
                this.$http.jsonp("https://sug.so.360.cn/suggest",{word:this.kw}).then(function(res){
                   this.items=res.data.s;
                   console.log(res.data.s);
                },function(res){
                    console.log(res.status);
                });
            }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

朮生 2022-09-13 00:10:33

dalao,你这个饿了么接口根本不是jsonp,只是ajax而已,所以你要用 this.$http.get才对

用jsonp请求ajax能成功就怪了。。。

注意jsonp和ajax是两个完全不同的东西。。。

掩饰不了的爱 2022-09-13 00:10:33

改用axios吧,官方推荐的

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文