在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中即可。以下是我的配置,实测有效。

  

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

  ============================================================================================

上面的解决方案仅使用于webpack 2+。跨域代理处理,用官方的代理,最终解决方案如下:

第一步:若按照上面的方案,需要把webpack.dev.conf.js中的后端代理的相关代码给删了

  第二步:在config/index.js中加入代理相关的配置

  

  第三步:请求地址改为实际的地址

  

  补充:配置后需要重启项目。

若后续遇到跨域的问题,都可按照这种方案解决。

  

  

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

  1. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

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

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  3. vue项目-axios封装、easy-mock使用

    vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...

  4. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  5. vue项目如何打包前后端不分离发布手把手教学apache、nginx

    vue项目如何不分离发布 1.首先yarn build 我用了vue-cli脚手架,bulid后的dist文件夹里的index.html有加版本号,那么为什么需要加版本号呢? a.回滚 b.解决浏览器 ...

  6. vue使用axios实现前后端通信

    安装依赖 npm install --save axios # vue-axios是对axios的简单封装 npm install --save vue-axios 用例 在main.js里面进行全局 ...

  7. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  8. vue.js axios实现跨域http请求接口

    跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. import axios from 'axios'; import qs from 'qs'; axios.post(' ...

  9. VUE项目axios请求头更改Content-Type

    const httpServer = (opts, data) => { const token = localStorage.getItem('token') const PUBLIC = ` ...

随机推荐

  1. 18 包 ,logging模块使用

    包: 1 什么是包: 包就是一个包含有__init__.py文件的文件夹 宝本质就是一种模块,即包就是用包导入使用的,包内部包含的文件也都是用来被导入使用 2 为什么要用包 包就是文件夹,那文件加就是 ...

  2. 双向循环链表涉及双向指针的基本操作(C语言)

    链表大概分为有无头指针,有无尾指针,是否循环,单向还是双向, 这些都很简单,前提是你要把指针和单链表理解透彻.这些都是基于单链表 的变形,要根据实际问题,选择链表的类型. 头指针的指针域储存着储存头节 ...

  3. tomcat https 支持android 6.0及以上版本的配置方法

    <Connector port="443"  protocol="HTTP/1.1" SSLEnabled="true" scheme ...

  4. kubeadm 双节点部署k8s v1.13.3+calico v3.3.4

    一.部署环境 VMware Workstation 10 centos7 二.主机配置(每台主机都要做) 主机名 ip cpu ram master 192.168.137.10 3G node1 1 ...

  5. sql中的CONCAT函数运用实例1

    1 第一个例子 select a.*,b.name as repayment_type_value,c.name as status_value, d.product_name, CONCAT(a.d ...

  6. day17(tomcat的安装,HTTP)

    Tomcat Tomcat是个小型服务器,由apache组织编写,转为发布java程序而写. 安装步骤: 官网:http://tomcat.apache.org/ 下载地址:http://tomcat ...

  7. 广搜 迷宫(zznu 1962)

    http://acm.zznu.edu.cn/problem.php?id=1962 题目描述 在很多 RPG (Role-playing Games) 游戏中,迷宫往往是非常复杂的游戏环节.通常来说 ...

  8. Foundation-NSOperation-NSInvocationOperation/NSBlockOperation/NSOperationQueue

    iOS多线程编程技术之NSThread.Cocoa NSOperation.GCD 线程之间的通信 iOS开发系列--并行开发其实很容易 GCD由浅入深学习 iOS多线程NSOperation/Que ...

  9. java锁的种类以及辨析(转载)

    java锁的种类以及辨析(一):自旋锁 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLock等等 ) .这些已经写好提供的锁为我 ...

  10. shell 命令 查看本机ip

    ifconfig 结果有很多,查看env0的inet,就是本机的ip地址