vue音乐APP使用jsonp和反向代理抓取QQ音乐歌单列表数据的区别

我是初学者，有什么错误的请你们指教！
最近在看vue音乐APP视频学习的时候发现老师文件目录结构和我不同，由于webpack版本更新了可能，老师配置跨域接口的文件我没有，后来我用之前搭建的一个项目里反向代理的方法实现了跨域。个人build目录结构以下

在这个index.js文件里面找到ProxyTable配置

再回到这个文件

配置以下：

记住params这个名字千万不能写错，我由于把它写成了param，致使请求参数都没有传过去，找问题的能力太差，最终在header里面发现了，回想起教程视频里老师提醒过这个。

（你们很容易查到：json和jsonp的区别，json是一种格式，jsonp是一种请求跨域资源的方式。这里就不作详细解释了。）

跨域：是指浏览器不能执行其余网站的脚本，它是由浏览器的同源策略形成的，是浏览器施加的安全限制。在跨域状况下，XMLHTTPRequest是不能发送异步请求的。
所谓同源是指域名、协议、端口均相同。

那么，同是跨域方法，为何轮播图的请求能够用jsonp的方式，而歌单的请求要使用反向代理，两个都是跨域方法。

比较两个请求jsonp和proxyTable反向代理的异同：

jsonp原理：<script>标签里的src是没有跨域限制的，<img>标签里的src也是没有限制的，咱们书写网页的过程当中不难发现这一点。jsonp就是经过在本站脚本建立一个<script>便签，将地址指向第三方的API地址来达到第三方通信的目的，并提供一个回调函数来接收数据，第三方响应为json数据的包装，这个是jsonp名字的由来（json padding）
jsonp的局限性：只支持GET方式的HTTP请求，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题

反向代理：本方法是在本身的浏览器建立一个服务器，而后让本身的服务器去请求目标服务器。并且跨域是针对JavaScript来讲的，JavaScript 是插入HTML页面后在浏览器上执行的脚本。服务器之间是能够随便请求数据而不受限制的。咱们经过本身建立的服务器去请求目标服务器，而后在从咱们客户端去请求咱们本身建立的服务器，这就不存在跨域了。

歌单URL：https://y.qq.com/portal/playl...
请求头

轮播图URL：https://m.y.qq.com/
请求头

在HTTP请求头里referer是表明这个请求是请哪一个URL过来的origin是在HTML5中跨域操做所引入的，当一个连接或者XMLHttpRequest去请求跨域操做，浏览器事实上的确向目标服务器发起了链接请求，而且携带这originhost在视频里存在歌单的请求头里，可是如今发现没出现，可能隐藏了，可是我在反向代理ProxyTable里设置了这个参数是一样能够请求成功的。这个参数表示了客户端指定了本身想访问的服务器地址，只要咱们使用反向代理向改服务器发送相同的请求头，就能够成功抓取数据到数据，由于目标服务器没法区分是否来自它自己服务器发送的请求。