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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
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
文章推荐系统(二)
2006/10/09 PHP
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php格式化金额函数分享
2015/02/02 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
语义化 H1 标签
2008/01/14 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python实现多人聊天室
2020/03/31 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
如何写辞职信
2015/05/13 职场文书