vue-cli axios请求方式及跨域处理问题


Posted in Javascript onMarch 28, 2018

vue-cli axios请求方式以及跨域处理

  • 安装axios
cnpm install axios --save
  • 在要使用axios的文件中引入axios
main.js文件 :import axios from 'axois'
要发送请求的文件:import axios from 'axois'
  • 在config/index.js文件设置代理
dev: {   
  proxyTable: {// 输入/api 让其去访问http://localhost:3000/api
   '/api':{  
     target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标)
   },
   '/api/*':{
    target:'http://localhost:3000'
   },
  changeOrigin: true,
   pathRewrite: { //路径重写 
      '^/api': '/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add',直接写‘/api/goods/add'即可
    } 
  }

    试一下,跨域成功,但是这知识开发环境(dev)中解决了跨域问题,生产环境中正真部署到服务器上如果是非同源还是存在跨域问题。

axios请求方式

Get请求

// 向具有指定id的用户发出请求
  axios.get('/user?id=1001')
   .then(function (response) {
    console.log(response.data);
   }).catch(function (error) {
    console.log(error);
   });
  // 也可以通过 params 对象传递参数
  axios.get('/user', {
    params: {
     id: 1001
    }
   }).then(function (response) {//请求成功回调函数
    console.log(response);
   }).catch(function (error) {//请求失败时的回调函数
    console.log(error);
   });

post请求

axios.post('/user', {
    userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });

补充:

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

1.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是无效的,使用箭头函数可以解决。

1.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.jsprod.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的代理。

1.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'}

1.拦截器的使用

 当我们访问某个地址页面时,有时会要求我们重新登录后再访问该页面,也就是身份认证失效了,如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 cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一到门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn't

pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下proxyTable就OK了,如下 config/index.js

dev: {
  加入以下
  proxyTable: {
   '/api': {
    target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
        //这里理解成用‘/api'代替target里面的地址,
        后面组件中我们掉接口时直接用api代替 比如我要调
        用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
    }
   }
  }

总结

以上所述是小编给大家介绍的vue-cli axios请求方式及跨域处理问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
详解AngularJS controller调用factory
May 19 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 #Javascript
浅谈React高阶组件
Mar 28 #Javascript
vue数据控制视图源码解析
Mar 28 #Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
vue 开发一个按钮组件的示例代码
Mar 27 #Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 #Javascript
vue2中使用less简易教程
Mar 27 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python画折线图的程序
2018/07/26 Python
Python创建字典的八种方式
2019/02/27 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python 使用type来定义类的实现
2019/11/19 Python
python如何安装下载后的模块
2020/07/03 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
大学生党课思想汇报
2013/12/29 职场文书
四查四看整改措施
2014/09/19 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
MySQL基础(二)
2021/04/05 MySQL
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python