vue项目中使用axios遇到的相对路径和绝对路径问题

目录
  • 使用axios遇到的相对路径和绝对路径问题
    • 1.设置全局baseURL
    • 2.覆盖baseURL
  • axios设置访问基础路径
    • 在main.js 做如下配置
    • 可能会遇到下面的报错

使用axios遇到的相对路径和绝对路径问题

部分依赖说明：

"vue": "^2.5.2",

"webpack": "^3.6.0",

"axios": "^0.19.0",

​通过设置全局baseURL，在其他组件中使用axios时便可以很方便。有时又可以根据需要在具体的请求配置中设置新的baseURL以覆盖全局的baseURL。在这些过程中，可能需要正确的使用相对路径和绝对路径才能达到预期的效果。

1.设置全局baseURL

首先在main.js中设置axios.defaults.baseURL = '/api';

绝对路径的形式：

1.url设置时，开头使用/，如下方的使用axios发起的post请求：

axios({
  //请求方式为post
  method: 'post',
  //绝对路径
  url: '/user/12345',
  //data等设置省略
  ......
});

其完整的Request URL为：http://localhost:8080/api/user/12345

2.url设置时，直接使用http或https开头，如下方使用axios发起的get请求：

axios({
  //请求方式为get
  method:'get',
  //绝对路径
  url:'http://192.168.6.66:8080/user/12345',
  //其他设置省略
  ......
})

其完整的Request URL为：http://192.168.6.66:8080/user/12345

2.覆盖baseURL

在当前界面下，需要发起请求，而且这个请求的baseURL不再是已经设置好的全局baseURL时，这时需要在请求配置中设置新的baseURL（如res）用来覆盖全局设置的baseURL:api。

最初的印象中，使用axios发起请求时设置的url及完整的Request URL似乎与发起请求的操作所在界面的url路径无关。但实际效果如何呢？这些有和绝对路径和相对路径有什么关系呢？

2.1.当前界面所在URL

当前界面所在的URL为：http://localhost:8080/app/pro

2.2.使用相对路径

以发送post请求为例，请求配置如下：

axios({
  //请求方式为post
  method: 'post',
  //绝对路径
  url: '/pic/',
  //`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。
  baseURL: 'res',
  //data等设置省略
  ......
});

其完整的Request URL为：http://localhost:8080/app/res/pic/，可以看到并不能达到想要的结果。

2.3.使用绝对路径

还是以发送post请求为例，请求配置如下：

axios({
  //请求方式为post
  method: 'post',
  //绝对路径
  url: '/pic/',
  //`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。
  baseURL: '/res',
  //data等设置省略
  ......
});

其完整的Request URL为：http://localhost:8080/res/pic/，可以看到此时将baseURL的值由api覆盖为res，达到了预期的效果。

参考：https://github.com/axios/axios/blob/master/README.md

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) {}）

可能会遇到下面的报错

isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot

read property 'protocol' of undefined

这是因为axios不是VUE插件，不能使用 Vue.use(axios) 方式引用，需要使用上述原型方式引入

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

赞 (0)

相关推荐

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

  • vue框架搭建之axios使用教程

    前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 使用说明 1.安装 cnpm install axios --save-dev 2.引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把axios挂载到vue上 3

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • 如何在Vue项目中使用axios请求

    在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装 首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题 如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =

  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    目录 一.axios是什么 特性 基本使用 二.为什么要封装 三.如何封装 设置接口请求前缀 设置请求头与超时时间 封装请求方法 请求拦截器 响应拦截器 小结 参考文献 一.axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分

  • vue项目中使用axios遇到的相对路径和绝对路径问题

    目录 使用axios遇到的相对路径和绝对路径问题 1.设置全局baseURL 2.覆盖baseURL axios设置访问基础路径 在main.js 做如下配置 可能会遇到下面的报错 使用axios遇到的相对路径和绝对路径问题 部分依赖说明: "vue": "^2.5.2", "webpack": "^3.6.0", "axios": "^0.19.0", ​通过设置全局baseURL,在

  • 在vue项目中使用axios发送post请求出现400错误的解决

    目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • Vue项目中如何封装axios（统一管理http请求）

    1.需求说明 在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用. 2.Vue项目结构 在本地创建Vue项目,目录结构如下: - public  静态资源文件  - src  |- assets  静态资源目录  |- components 公共组件目录  |- http   axios封装目录  |- router  路由管理目录  |- store  状态管理目录  |- views  视图组件目录  |- A

  • vue项目中axios的封装请求

    目录 一.简介 二.封装后 1.封装步骤 2.封装目标 3.使用新的axios封装API 4.使用封装后的axios 一.简介 axios 是一个轻量的HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大大宣布取消对vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分 Vue 开发者的首选.( 如果你还不熟悉 axios,可以在这里

  • 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    目录 Axios简介 一.axios是干啥的 二.安装使用 三.Axios请求方式 1.axios可以请求的方法: 2.get请求 3.post请求 4.put和patch请求 5.delete请求 6.并发请求 四.Axios实例 1.创建axios实例 2.axios全局配置 3.axios实例配置 4.axios请求配置 五.拦截器 1.请求拦截器 2.响应拦截器 3.取消拦截 六.错误处理 七.取消请求 结语 提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项

随机推荐