首页 > 其他 > 详细

在前端项目中利用后端做接口代理

时间:2019-05-05 22:03:48      阅读:246      评论:0      收藏:0      [点我收藏+]

 

在做vue-music的项目中,需要去请求qq音乐的相关api,可是直接前端去拿数据是拿不到的,会报服务器500的错误,但是单独打开该网页是没有问题的,这个问题说明服务器本身是没有问题的,于是想办法解决呗

在查到的资料中说可以又一个后端代理的办法,首先理解一下它的原理:

有些 header 在浏览器端是不能直接设置的,比如 referer。而 QQ 音乐一些的接口服务端(猜测)会验证 referer 或者是 host 这些 header。所以我们相当于通过一种代理的方式,先把请求发送给我们自己的 server(express 的 node 服务),然后我们的 server 在把这条请求转发到 QQ 音乐的服务端,而我们的 server 去请求 QQ 音乐的 server 也是通过 http 请求,和浏览器不同的是这个时候我们是可以设置任意 header 的。

技术分享图片

 

 然后在遇到的第一个坑就是vue-cli之前的版本生产的build里面的配置文件是dev.server,所以之前的版本是在dev.server中写这样的配置:

技术分享图片

显然现在的版本是没有办法写这样的配置了,因为vue-cli搭起来的配置文件是webpack.dev.config.js,所以我们现在要在这里配置,

首先还是安装express(来做代理),然后:

技术分享图片

最后在这里添加:

技术分享图片

然后你在检查头的时候,惊奇的发现,并且成功的拿到数据了

技术分享图片

 

在前端项目中利用后端做接口代理

原文:https://www.cnblogs.com/yuan233/p/10811417.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!