vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

  在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式。借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了。代码如下:

  

  仔细检查后,代码没问题;于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码。于是想到会不会是webpack版本更新,配置发生了改变导致的。所以仔细看了配置后,发现webpack.dev.conf.js确实不同,新版本把devsever直接配置进去了。

  旧版本的webpack.dev.conf.js

  

  新版本的webpack.dev.conf.js

  

  找到原因后,我就百度寻找新版本如何配置了,然后找到了以下这篇文章,按照上面的方法,实测有效,能获取到数据了。

分享给大家:VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

  其他地方不变,只需要把dev-server.js中的代码去了,加入到webpack.dev.conf.js中即可。以下是我的配置,实测有效。

  

   解决了一个问题,还是挺有收获的。

时间: 2024-10-01 05:32:02

vue项目axios请求接口,后端代理请求接口404,问题出现在哪?的相关文章

Vue-CLI项目-axios模块前后端交互(类似ajax提交)

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

vue中axios的post和get请求示例

POST请求 methods: { isclick() { if (this.account == "" || this.pwd == "") { this.$message.warning("请输入账号或密码"); } else if (this.account && this.pwd) { let data = { account: this.account, password: this.pwd }; this.$axios

VUE+axios+php获取后端数据(宝塔面板)

总是听别人说axios好,好在哪里咱也不知道,继上一篇博文还不懂axios,现在稍微可以应用了(暗暗加油!) 看官网教程的时候一直困惑axios里的url到底是什么,很长一个url链接搞的我更迷惑了(其实就是一个PHP文件,读取php文件获得数据而已) vue用axios方法从后端获取数据(感觉确实方便了不少) 附上前端代码 <!DOCTYPE html> <html> <!-- head中引入了element,vue,vue-router,axios --> <

Vue安装axios实现接口请求

一.vue-cli使用aios 1.安装命令:cnpm instal  axios --save 2.main.js引入全局使用 //axios import axios from 'axios' Vue.prototype.$axios = axios 3.组件或页面中使用 methods: { testAxios1:function(){ console.log('test'); this.$axios({ method: 'get', url: 'data/personData.json'

vue中axios发送post请求,后端(@RequestParam)接不到参数

遇到的问题描述 :axios post 请求,后端接收不到参数. 我们的接口是java,用@RequestParam来接收前端的参数 解决方案:使用qs:axios中已经包含有qs,所以无需重新安装,直接引入就好 import Qs from 'qs'//引入qs let chedata = { data: encStr, sign: md5.hexMD5(che), timestamp: timestamp, } //chedata是我需要传递给后端的参数 console.log(Qs.str

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?

在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部分情况下就够用了. 然后现在问题又来了,在生产环境下接口一般采用https协议,如果我们要把数据请求转发到生产服务器上怎么办? 首先会想是不是把上一篇博文中提到的proxyTable改成https就可以了,如下:     proxyTable: {                '/appserve

Tomcat高级部分-使用特定模块和软件反向代理请求到后端tomcat实现负载均衡和session保持

实验目标: 1.反向代理服务器将用户请求负载均衡到后端tomcat节点: 2.配置基于nginx的负载均衡,实现会话绑定: 3.配置基于mod_jk的负载均衡,实现会话绑定: 4.基于mod_proxy实现负载均衡,实现会话绑定: 网络架构图: 网络主机规划表: 实验步骤: 前提配置: 1.tom1和tom2节点时间必须同步: 建议使用ntp协议进行: 参考博客:http://sohudrgon.blog.51cto.com/3088108/1598314 2.节点之间必须要通过主机名互相通信:

Vue框架axios请求(类似于ajax请求)

Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></scr

vue中axios 配置请求拦截功能 及请求方式如何封装

main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios //http request 封装请求头拦截器 axios.interceptors.request.use(config => { // console.log("request&quo