vue.js - vue-resource请求接口接口在浏览器中没问题 但报错Unexpected token :

问题描述

问 题

      <template>
    <div id="search">
        <div class="searchbox">
            <span class="backicon" v-on:click="back"><img src="../img/back.svg"></span>
            <input type="text" placeholder="搜索音乐、歌词、歌单" v-model="searchKey">
            <span class="searchText" v-on:click="search">搜索</span>
        </div>
<!--        <p>{{searchKey}}</p>-->
        <div class="hotTag">
            <p>热门搜索</p>
<!--
            <ul>
                <li v-for="song in list">
                    {{song.fsong}}
                </li>
            </ul>
-->
<!--
            <ul>
                <li>
                   aaa
                </li>
                <li>
                   bbbada
                </li>
            </ul>
-->
        </div>
        <div class="historyTag">
            <p>搜索历史</p>
<!--
            <ul>
                <li>sadada</li>
                <li>sadada</li>
                <li>sadada</li>
                <li>sadada</li>
            </ul>
-->
        </div>
    </div>
</template>
<style>
    #topNav{
/*        display: none;*/
    }
    #search{
        font-size: .14rem;
    }
    .searchbox{
        width: 100%;
        height: .7rem;
        background: #31C27C;
        color: #fff;
        
    }
    .searchbox .backicon{
/*        float: left;*/
        display: block;
        float: left;
        width: .5rem;
        height: .5rem;
        padding: .1rem;
    }
    .searchbox .searchText{
        display: block;
        float:left; 
        width: .6rem;
        height: .5rem;
        line-height: .5rem;
        padding: .1rem;
    }
    .searchbox span img{
        width: .4rem;
        padding: .05rem;
    }
    .searchbox input{
        float: left;
        width: calc(100% - 1.7rem);
        height: .5rem;
        margin: .1rem;
        border: none;
        padding: 0;
        border-radius: .05rem;
    }
    .hotTag{
        width: 100%;
        padding: .1rem .15rem;
    }
    .hotTag p{
        color:#666;
    }
    .hotTag ul{
        list-style: none;
        padding: 0;
    } 
    .hotTag ul li{
        display: inline-block;
        width: auto;
        height: .3rem;
        line-height: .3rem;
        border-radius: .3rem;
        padding: .05rem .15rem;
        border: 1px solid #666
    }
    .historyTag{
        width: 100%;
       padding:  .1rem .15rem;
    }
    .historyTag p{
         color:#666;
    }
    .historyTag ul{
        list-style: none;
        padding: 0;
    }
    .historyTag ul li{
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        border-top: 1px solid #e1e1e1;
    }

</style>
<script>
    export default{
        data(){
            return{
                searchKey:'',
                list:[],
                num:10
            }
        },
        methods:{
             back: function () {
                 history.go(-1)
             },
            search: function () {
            this.$http.jsonp('http://s.music.qq.com/fcgi-bin/music_search_new_platform?t=0&n=${`num`}&aggr=1&cr=1&loginUin=0&format=json&inCharset=GB2312&outCharset=utf-8&notice=0&platform=jqminiframe.json&needNewCode=0&p=1&catZhida=0&remoteplace=sizer.newclient.next_song&w=${`searchKey`}', {},{
                headers: {

                },
                emulateJSON: true
            }).then(function (response) {
                // 这里是处理正确的回调

                this.list = response.data.song.list
                    // this.articles = response.data["subjects"] 也可以

            }, function (response) {
                // 这里是处理错误的回调
                console.log(response)
            });
        }
        }
        
    }
</script>

报错

直接在浏览器中查看接口

解决方案

谢邀

因为这就不是一个jsonp

其实jsonp跟http请求基本没有什么关系，它是用script标签的src属性实现的跨域，都知道javascript可以使用远端的脚本，只要把script的src写成一个url就行了，比如:

<script src="//cdn/example/example.js">

这时候就可以使用这个example.js了。

如果example.js中的内容是:

window.callback({"name":"gao","age":18});

那么它就会执行window.callback方法

如果我们在之前自己定义了window.callback方法:

window.callback = function(obj){
    window.ajaxData=obj
}

这样就实现了跨域了，window.ajaxData就取到的远端的内容。

那么动态jsonp是怎么实现的呢？

比如script的src是一个动态脚本

<script src="http://example.com/jsonp.php?query=hello&callback=getJsonp">

jsonp.php:

<?php
    $query=$_GET["query"];
    $cb=$_GET["callback"];
    $obj=array("name"=>$query);
    echo $cb."(".json_encode($obj).")";
?>

这样就会得到这样一段js

getJson({"name":"hello"});

所以jsonp就是这样实现的。

你这个接口只返回一段json，这样是不能用jsonp的，(因为没有回调函数)。

说说JSON和JSONP，也许你会豁然开朗

this.$http.get("http://s.music.163.com/search/get/?type=1&limit=5&s="+this.searchKey).then(function(res){

})

这篇关于vue.js - vue-resource请求接口接口在浏览器中没问题 但报错Unexpected token :的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！