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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Node.js学习教程之Module模块
Sep 03 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
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
委托公证书范本
2014/04/03 职场文书
校庆口号
2014/06/20 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL