vue:axios请求本地json路径错误问题及解决

目录
  • axios请求本地json路径错误
  • axios的基础路径如何设置
    • 举个栗子吧↓
    • 步骤一：入口文件：main.js
    • 步骤二：组件：newList.vue

axios请求本地json路径错误

本例用的是vuecli4，json等静态资源存放在public文件夹中

返回404

this.axios.get('public/redeme.json').then((res) => {
      console.log(res.data)
    })

其实vue从代码到界面展示还要经过编译，所以路径会有所改变

实际路径可以先打包一下，我是这么找到json的路径的

打包后的文件目录如下

所以我把路径改成：

this.axios.get('./redeme.json').then((res) => {
      console.log(res.data)
    })

获取成功：

axios的基础路径如何设置

在不通过接口文件的情况下，如何使用axios呢？

在组件中调用axios，没必要一定在接口文件中设置，你可以选择在入口文件中设置基础访问路径，在组件中通过this.axios这个方法发送异步请求即可。

举个栗子吧↓

项目要求：所有api的域名为：http://www.escook.cn:3000  如果后面文档中，有的域名地址和这里不一样，以这里的为主；

请求接口：/api/getnewslist

请求方式：get

具体代码如下：

步骤一：入口文件：main.js

import axios from 'axios';
axios.defaults.baseURL='http://www.escook.cn:3000 '
Vue.prototype.axios=axios

步骤二：组件：newList.vue

 created () {
    this.axios.get('/api/getnewslist').then(res=>{
         console.log(res)
         this.newList=res.data.message
    })
  }

注意：this指代vue，要在axios前加上this

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue-cli3中使用axios获取本地json操作

    在vue-cli3中,公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取,不能用post,不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console.log(data) }) 补充知识:两个不同的路由,引入相同的组件 从不同的按钮进入到详情页,两个不同的路由,相同的组件 主要是从不同按钮进入不同路由的页面,内容一致,但是title不一

  • vue如何解决axios请求前端跨域问题

    vue如何解决axios请求前端跨域问题

    目录 前言 一.为什么会出现跨域的问题? 二.解决方案 跨域资源共享(CORS) 写在最后 前言 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中跨域问题有很多的解决方案.最常见的就是后端修改响应头.但是前端也可以解决,通过反向代理.为了防止下一次这样的错误出现,记录一下,总结一下. 所以现在我们来复盘一下,然后解决掉. 一.为什么会出现跨域的问题? 跨域:浏览器从一个域名的网页去请求另一

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

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

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

  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    目录 axios请求本地json路径错误 axios的基础路径如何设置 举个栗子吧↓ 步骤一:入口文件:main.js 步骤二:组件:newList.vue axios请求本地json路径错误 本例用的是vuecli4,json等静态资源存放在public文件夹中 返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • Vue中请求本地JSON文件并返回数据的方法实例

    Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • vue axios请求拦截实例代码

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 下面代码给大家介绍vue axios 请求拦截,具体代码如下所示: import axios from 'axios';//引入axios依赖 imp

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

  • vue axios请求成功却进入catch的原因分析

    问题:axios返回200状态码(即请求成功)却走进了catch里面 原因: 1.当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了) 2.axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到.例如 form表单,点击按钮提交后,表单会刷新 补充知识:axios用catch的写法与不使用catch有什么区别? 官网上的写法: axios.post(url

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

随机推荐