Vue使用axios实现跨域请求

在前后端分离的项目中，关键的一步就是能够进行跨域请求，可以通过前端发送请求访问不同端口的服务器获取数据。
为了解决这一问题使用的是axios来实现跨域请求。

一、安装axios

使用npm安装

npm install axios --save

首先进入项目所在目录然后输入以上命令就可以在当前项目中引入axios

二、在main.js中导入axios

在main.js中添加以下代码就可以导入axios并使用，

//导入axios
import Axios from "axios"
//将axios挂载到原型
Vue.prototype.axios = Axios

三、添加配置

由于我使用的是Vue-cli-4.x所以文件目录中没有build文件夹，但是仍然可以通过添加配置文件的方式进行配置
在项目根目录中创建js文件，命名为vue.config.js，然后添加一下代码

//配置axios跨域请求
    devServer: {
        proxy: {
            '/api': { //访问路径，可以自己设置，
                target: 'http://localhost:8081', //代理接口，即后端运行所在的端口
                changeOrigin: true, //设置是否跨域
                ws: true,
                pathRewrite: { //访问路径重写
                    '^/api': ''
                }
            }
        }
    }

四、发送get请求

this.$axios.get("请求url",{param:{}})
           .then(function(response){
                  console.info(response.data);
                 })
           .catch(function(error){
                   console.info(error);
                 });

五、发送post请求

this.$axios.post("请求路径",{})
           .then(function(response){
                  console.info(response.data);
                 })
           .catch(function(error){
                  console.info(error);
                 });

六、其他

到此axios配置已经基本完成，但是还有一些其他的问题或是配置，
比如：

//配置baseURL接口域名
axios.defaults.baseURL = 'https://localhost:8081/api/';
//配置token
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//配置请求头数据格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

等等，就需要自行配置了，这里就不再过多记录了。