webpack3.6.0如何使用axios+express配置路由转发?

0 0 webpack express axios
Cocos︷Creator
Cocos︷Creator

声望值:201 0人

2019-02-13 14:48:45 提问

关注 0关注

收藏 0收藏, 148浏览

背景:目前正在学习慕课网上的vue2.0教程-QQ音乐APP,由于视频演示的是webpack2.x,而自己操作实际的webpack已经是3.6.0了。现在有个需求就是通过请求https://c.y.qq.com/splcloud/f... 拿到歌单数据,因为有referer限制

clipboard.png

clipboard.png

所以需要代理请求。视频中老师的做法是
先在推荐组件对应的单JS文件(recommend.js)中定义一个使用axios获取数据的函数getDiscList()

clipboard.png

这里的url 'api/getDiscList'是请求的后端接口,因为要代理修改请求参数referer,所以是需要将这个接口代理配置的。具体怎么配置也是我正迷糊的地方。然后老师又这么做了
在build目录下的dev-server.js中
clipboard.png

配置了express.Router(),定义了/getDiscList接口,以及修改了referer,host

clipboard.png

之后npm run dev就可以在浏览中找到请求是正常请求并且返回了数据。
而我是这么做的
在recommend.js中,与老师一样,定义函数getDiscList()。
但是在做代理的时候发现找不到dev-server.js。后来查询得知webpack3.6.0的版本并没有dev-server.js和dev-client.js这两个文件,相关的配置改到webpack-dev-conf.js文件中进行。这是我在webpack-dev-conf.js中修改过后的:

clipboard.png

在devServer:{}选项中添加了下面代码

clipboard.png

这段代码与老师的类似,但是referer不同,这个referer我是根据现在的qq接口上的referer来的。
而且,我的package.json中是没有express的
结果报错如下:

clipboard.png
浏览器调试工具显示

clipboard.png
现在请问:
1.如何在webpack3.6.0基础上修改实现请求?
2.before()这个干吗用,接收的参数是什么意思,因为我在有的地方看的是app(express对象).有的是apiRoute(express.router对象)?
3.这个问题快困扰我一个星期了,本人做前端,对后端这块不太了解。在解决这个问题期间看了很多文档,博客。里面提到了从最基本的node.js的http模块,然后express框架,然后是express.router,最后就是webpack中关于服务器这块的http.proxy.middle.。产生了很多小的疑问:
(1):http模块用最通俗的话来讲,是不是做一些后端层面的工作?比如:接收什么类型请求,成功/失败后的处理,验证,数据传输,以及请求的代理。
(2):express.router这个路由的概念与某些PHP框架中的路由有什么具体的区别?
(3):在需要发送一个请求,通过代理实现伪造参数,骗过目标服务器的时候。这种代理实现的手段有哪几种(说出技术点即可,比如express+axios)?

请先 登录 后评论

1个回答

  • xyf76声望 2018-09-25 09:28

    真的很奇葩,在config文件夹的,index.js的proxyTable选项中添加一次 target,莫名其妙的就好了。再将proxyTable选项配置全都删掉,依旧可以请求数据了。难道是QQ音乐的问题?
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问