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里设置了这个参数是同样可以请求成功的。这个参数表示了客户端指定了自己想访问的服务器地址，只要我们使用反向代理向改服务器发送相同的请求头，就可以成功抓取数据到数据，因为目标服务器无法区分是否来自它本身服务器发送的请求。

原文地址：https://www.jb51.cc/json/288617.html