Vue axios及跨域请求相关处理

版权声明：本文为博主原创文章，未经博主允许不得转载。

axios的概述

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

* 从浏览器中创建 XMLHttpRequests
* 从 node.js 创建 http 请求
* 支持 Promise API
* 拦截请求和响应
* 转换请求数据和响应数据
* 取消请求
* 自动转换 JSON 数据
* 客户端支持防御 XSRF
复制代码

使用axios调用接口

• 尝试执行请求

  请求地址：http://localhost/myphpTest/demo.php?user=liming
  请求方式：get
  发送数据：{user:liming}
  

由于vue-cli与所请求地址形成跨域，使用vue-cli3解决跨域方法如下：

需要在开发环境下将 API 请求代理到 API 服务器。通过 vue.config.js 中的 devServer.proxy 选项来配置。
复制代码

1. 安装axios npm install axios,安装完成后查看package.json内是否形成axios依赖。

2. 根目录下创建vue.config.js，写入proxy代码

module.exports = {
  configureWebpack: {
      devServer: {
          proxy: {
              //名字可以自定义，这里我用的是api
              '/api': {
                target: 'http://localhost:80',//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,//这里设置是否跨域
                pathRewrite: {
                  '^/api': ''
                }
              }
          }
      }
  },
}

复制代码

3. 使用axios发送请求异步请求

axios.get("/api/myphpTest/demo.php")
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
复制代码

转载于:https://juejin.im/post/5cf07f4de51d4510b71da59a