vue实现配置全局访问路径头(axios)

在vue中用axios发送请求的时候总是：

axios.get(“http://localhost:3000/xxx/xxx”,{params:{xx:xxx}}).then(res=>{}).catch(error=>{})

配置全局的url:

1.安装axios:npm install axios --save-dev

2.main.js:

import axios from “axios”
axios.defaults.baseURL = “http://localhost:3000/users/”; // 关键步骤–填写后台请求统一的地址
axios.defaults.headers.post[‘Content-Type'] = ‘application/x-www-form-urlencoded';
Vue.config.productionTip = false;
Vue.prototype.$addr = axios;

3.访问:

此时再访问的时候就会自带请求头了：

this.$addr.get(“userInfo”,{params:{xx:xxx}});

以上这篇vue实现配置全局访问路径头(axios)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • 详解Vue-axios 设置请求头问题

    在axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头请求格式为JSON 'access_token': this.token //设置token 其中K名要和后端协调好 }, params:{} }).then((response)=>{}) 下面看

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • vue实现配置全局访问路径头(axios)

    在vue中用axios发送请求的时候总是: axios.get("http://localhost:3000/xxx/xxx",{params:{xx:xxx}}).then(res=>{}).catch(error=>{}) 配置全局的url: 1.安装axios:npm install axios --save-dev 2.main.js: import axios from "axios" axios.defaults.baseURL = &quo

  • SpringBoot配置项目访问路径URL的根路径方式

    目录 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 2.SpringBoot在2.0之后版本 设置默认访问路径 1.继承WebMvcConfigurerAdapter类或实现WebMvcConfigurer接口 2.@Controller路由设置 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 使用server.context-path server.context-path=/api 2.SpringBoot在2.0之后版本 使用serve

  • Vue如何配置根目录@(引用路径)

    Vue如何配置根目录@(引用路径)

    目录 Vue如何配置根目录@ Vue配置@作为src根路径 Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用. @这是webpack设置的路径别名,默认指向src. 旧版本在build/webpack.base.conf这个文件里面定义. 新版本在根目录下创建在vue.config.js定义. const path = require('path') const resolve = dir => path.join(__dirname, dir) module.export

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

  • Linux Centos7.2下安装nodejs&npm配置全局路径的教程

    首先登陆官网:https://nodejs.org/en/ 安装之前检测是否装了 gcc gcc-c++ python 2.7+ 没有的话yum install 下载完成之后上传到Linux: rz 没有rz sz的话安装一下(yum -y install lrzsz) 然后依次执行: cd /usr/local mkdir nodejs6 cd nodejs6 rz ------ 选择nodejs文件 tar xzvf node-v6.11.0.tar.gz cd node-v6.11.0 .

  • vue+axios全局添加请求头和参数操作

    走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量) 1.放在请求头中 2.放在接口的参数中 1.放在请求头中 下面代码是从本地cookie中拿token VueCookie:一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { //

  • 关于Vue背景图打包之后访问路径错误问题的解决

    案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP

  • 在vue中配置不同的代理同时访问不同的后台操作

    如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口 在config文件夹下的index.js中设置如下: proxyTable: { '/api/login': { // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的 target: "http://192.168.100.209:8910", changeOrigin: true, secure: false }, '/api/supplier': { // 设置第二

  • 部属vue项目,访问路径设置非根,显示白屏的解决方案

    部属vue项目,访问路径设置非根,显示白屏的解决方案

    目录 vue访问路径设置非根显示白屏 解决 vue部署到非根目录设置 需要修改三处配置 vue访问路径设置非根显示白屏 问题: 访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境: 使用nginx部属vue项目时,没有把访问项目设置为根路径 说明: 当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在

  • nginx部署vue项目,给访问路径加前缀的实现

    目录 Nginx安装与启动 Vue增加访问路径 nginx配置 总结 Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 start nginx 关闭命令 taskkill /f /t /im nginx.exe 改了配置文件,不需要先关闭再启动,直接重启,重启命令 nginx -s reload Vue增加访问路径 有时候会根据需要,区分不用的v

随机推荐