Vue 2.5.2下axios + express 本地请求404的解决方法

最近在学习Vue,今天尝试了使用axios模拟本地网络请求。使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中，接口请求应该这样写。

1、引入相关依赖

var axios = require('axios')
const express = require('express');
var app = express();
var apiRoutes = express.Router();
app.use('/api', apiRoutes);

2、处理网络请求

在之前的项目中，我们是在dev-server.js 这样处理接口访问

apiRoutes.get('/getList', function (req, res) {
 //处理网络请求

})

现在默认构建的项目工程是没有dev-server.js文件的，然后我们可以在webpack.dev.conf.js中添加ur。

before(app) {
  app.get('/api/getList', function(req, res) {
  //处理网络请求
  });
 },

3、重新编译

npm run dev

此时，项目运行，接口就可以正常访问了。

以上这篇Vue 2.5.2下axios + express 本地请求404的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js实战之使用Vuex + axios发送请求详解
  • vue使用axios跨域请求数据问题详解
  • 详细讲解vue2+vuex+axios
赞 (0)

相关推荐

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • 详细讲解vue2+vuex+axios

    详细讲解vue2+vuex+axios

    在vue2项目中,组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下(后台获取数据存入vuex,组件之间共享数据),那么就需要用vuex来管理这些. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios,然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项目中安装vuex: 运行命令:npm install vuex --save-dev 在项目的

  • Vue 2.5.2下axios + express 本地请求404的解决方法

    最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求

  • vue下history模式刷新后404错误解决方法

    本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • jmeter在linux系统下运行及本地内存调优的方法详解

    1.在linux系统下安装跨系统传输文件工具 root用户下 根目录输入 yum -y install lrzsz 2.把apache-jmeter-4.0zip包 用rz命令上传到linux系统的根目录下 解压 3.配置jmeter环境变量 vim /etc/profile 添加 export PATH=/apache-jmeter-4.0/bin/:$PATH 注意路径 4.使用 rz命令上传jdk1.8 linux 64位版本 解压到 usr/local 目录下 下载jdk安装包 下载地址

  • vue移动端html5页面根据屏幕适配的四种解决方法

    vue移动端html5页面根据屏幕适配的四种解决方法

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

  • window环境下npm install node-sass报错的解决方法

    最近准备想用vue-cli初始化一个项目,需要sass-loader编译: 发现window下npm install node-sass和sass-loader一直报错, window 命令行中提示我全局安装 node-gyp ,有些提示好像是本地找不到python, 于是我按照提示安装node-gyp node-gyp是一个用Node.js编写的跨平台命令行工具,用于编译Node.js的本地插件模块. node-gyp node-gyp官方网址  https://www.npmjs.com/p

  • axios 处理 302 状态码的解决方法

    比如说浏览器打开了一个单页面(SPA)应用,过了一段时间token(或者session)过期了,这个时候页面上发起 Ajax请求之后,后端返回302状态码跳转到login页面. 我这是使用的是 Vue + axios ,发现 axios 无法拦截到 302请求,下面是处理的过程. 思考 google axios 302 handle 看到 axios github 上的两个讨论 •  https://github.com/axios/axios/issues/932 •  https://git

  • CentOS 7下MySQL服务启动失败的快速解决方法

    今天,启动MySQL服务器失败,如下所示: [root@spark01 ~]# /etc/init.d/mysqld start Starting mysqld (via systemctl): Job for mysqld.service failed because the control process exited with error code. See "systemctl status mysqld.service" and "journalctl -xe&qu

  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法

    Windows 8.1下MySQL5.7 忘记root 密码的解决方法

    [背景] 最近学习碰到了一件挺令人尴尬的事情,我把MySQL的密码给忘记了,所以MySQL登录不进去. 网上的解决方案很多,尝试了很多,依旧是被窗口的各种报错虐.感谢大神的助力,MySQL忘记密码解决方案才得以清晰,希望本篇博客的解决过程可以帮到读者. [问题解决过程] 一.跳过MySQL的权限审查进入MySQL 首先,找到MySQL的my.ini配置文件. 然后,打开文件,在mysqld下,添加一句代码 skip-grant-tables ,以跳过权限的审核. 很重要的一步:win+R 输入s

  • nginx 下安装配置 phpadmin报错的解决方法

    如下所示: 系统版本:centos7.0 64位 NGINX版本:nginx version: nginx/1.9.8 PHP版本:PHP 7.0.0 (cli) (built: Dec  1 2015 17:53:27) ( NTS ) mysql版本:mysqld  Ver 5.7.10 phpmyadmin版本:4.5.2-all-languages 部署完phpmyadmin,访问主页报错: Error during session start; please check your PH

随机推荐