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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
SVG实现时钟效果
Jul 17 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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资源管理框架Assetic简介
2014/06/12 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
PHP7 list() 函数修改
2021/03/09 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python实现kMeans算法
2017/12/21 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
最新结婚典礼主持词
2014/03/14 职场文书
《画》教学反思
2014/04/14 职场文书
《菜园里》教学反思
2014/04/17 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
人力资源求职信
2014/05/25 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python