关于jsonp的一些事！！！

最近在模仿做网易云音乐的app，我用的是vue全家桶。然后通过访问它的后台获取一些音乐以及其他的信息，这样就可以实现播放歌曲了。
但是很生气的是，当我做到通过album 的id发送请求到后台获取相应专辑的信息时，出现了问题。然后一个人倒腾了好久——-想哭！

首先我用的是vue-resource来发送请求，开始使用的是get，但是最后显示我跨域请求。

created(){
            const albumId=this.$route.params.id
            const url='http://music.163.com/api/playlist/detail?id='+albumId+'&updateTime=-1'
            this.$http.get(url).then(
               res=>{
                  console.log(res)
                  console.log(1)
               },error=>{
                  console.log(error)
                  console.log(2)
               });
        }

想了想是跨域了，于是乎我开始用最简单的解决跨与的方式解决—jsonp，但是居然还是报错，让我开始怀疑自己的人生，怀疑自己到底懂不懂什么是jsonp了，于是乎有好好学习了一遍。再加上度娘协助，最后找到了坑爹的原因—–我请求的服务器不支持jsonp的形式，导致返回的数据没有使用callback包裹数据（ 完美的返回形式应该是这样的callback({“username”:”jack”,”age”:21,”gender”:”male”}) ），但是坑爹的网易后台返回的数据直接是json数据（类似于这样的{“username”:”jack”,”age”:21,”gender”:”male”}）。
如果返回的数据格式不按上述讲的这样，请求就会失败并直接进入ajax的error方法。像 Uncaught SyntaxError: Unexpected token : 类似这种错误就是返回的json数据没用“(”和“)”小括号包起来或者前面没加callback值而引起的。本质原因还是：由于后台直接将json数据send过来，而json数据是不能跨域的，只能以jsonp的形式进行跨域，造成前端无法直接获取数据。

created(){
            const albumId=this.$route.params.id
            const url='http://music.163.com/api/playlist/detail?id='+albumId+'&updateTime=-1'
            this.$http.jsonp(url).then(
               res=>{
                  console.log(res)
                  console.log(1)
               },error=>{
                  console.log(error)
                  console.log(2)
               });
        }

然而可气的是，其实请求是成功的，状态码是200，数据也返回了。查看network的response知道返回的数据时json数据。然而问题就出在这里，这段JavaScript代码，其实就是一段没有意义的对象了，因为没有将它赋值个一个变量，你是无法拿到，这需要借助后台。

因为jsonp返回的数据应该是Javascript代码（jsonp实际上是相当于用JavaScript加载脚本的方式将数据加载进来的），并且代码里面调用callback函数，所以当浏览器把它当做Javascript来解析，遇到“:”就报错了。

在这里要感谢这两篇文章：文章一
文章二
文章三
同时还发现了一篇不错的文章果断转载了

解决方法：
（1）后端代理一下。就是你请求你本地的比如/api/playlist/detail?id=584737619”，然后后台帮你去”http://music.163.com/api/playlist/detail?id=584737619“;取到数据，然后再发给你
（2）网友的做法还没有试过