vue中axios解决跨域问题和拦截器的使用方法


Posted in Javascript onMarch 07, 2018

vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点:

第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了

import axios from 'axios';
Vue.prototype.axios=axios;

components:

this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

这里需要注意一点,就是在axios中把请求到的数据 使用this复制给data是无效的,使用箭头函数可以解决。

vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',是要跨域的才可以访问的,如果直接访问会报 XMLHTTPRequest can not load http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'. Response to preflight request doesn't pass access control….

为什么存在跨域问题?因为这是非同源互相通讯,具体可以自己去google了解,这里只需要在webpack配置一下proxyTable就OK了,在config中找到index.js如下 :

config/index.js

dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

跨域成功,但是这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置,分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

config/dev.env.js:

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如:

instance.post(process.env.API_HOST+'user/login', this.form)

然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

axios发送get post请求问题

发送post请求时一般都要设置Content-Type,发送内容的类型,application/json指发送json对象但是要提前stringify一下。application/xxxx-form指发送?a=b&c=d格式,可以用qs的方法格式化一下,qs在安装axios后会自动安装,只需要组件里import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成?&=格式
'Content-Type':'application/xxxx-form'}

拦截器的使用

当我们访问某个地址页面时,有时会要求我们重新登录后再访问该页面,也就是身份认证失效了,如token丢失了,或者是token依然存在本地,但是却失效了,所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误,授权出错,也就是没有权利访问该页面。

我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器,有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

以上这篇vue中axios解决跨域问题和拦截器的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
You might like
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP多态代码实例
2015/06/26 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
python监控文件或目录变化
2016/06/07 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python分布式计算dispy的使用详解
2019/12/22 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
谈谈python垃圾回收机制
2020/09/27 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
工作迟到检讨书
2014/02/21 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
检察院起诉书
2015/05/20 职场文书
Python基础之pandas数据合并
2021/04/27 Python
django 认证类配置实现
2021/11/11 Python