vue2使用axios发送post和get请求(含跨域解决

安装axios

百度搜索axios找到axios中文文档，找到安装命令
npm install axios 或者 npm i axios
npm i axios 是 npm install axios 的简写，二者没区别

安装axios快捷插件(省去记忆烦恼

插件名：Axios Snippets 作者：Yggdrasill-7C9

在vue中引入axios

import axios from 'axios'

在方法中使用,发送post请求

其他请求参照axios中文文档

 axios
        .post("请求api地址", '请求参数对象')
        .then((res) => {
          console.log("post类型请求返回的数据", res.data);
        })
        .catch((err) => {
          console.error('请求失败信息',err);
        });

完整vue代码

点击查看代码

<template>
  <div id="app">
    <div>
      <button
        @click="requestPost"
        style="height: 50px; line-height: 50px; font-size: 25px"
      >
        点我向 abc.yongheng.work 发起post类型的ajax，请求数据
      </button>
      <span ref="post"></span>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div>
      <button
        @click="requestGet"
        style="height: 50px; line-height: 50px; font-size: 25px"
      >
        点我向 abc.yongheng.work 发起get类型的ajax，请求数据
      </button>
      <span ref="get"></span>
    </div>
  </div>
</template>

<script>
// 安装完axios后，导入axios
import axios from "axios";
export default {
  name: "App",
  components: {},
  methods: {
    requestPost() {
     // axios发起post请求，并携带post参数name
      axios
        .post("/api/Test/index", { name: "anbin" })
        .then((res) => {
          console.log("post类型请求", res.data.data[0]);
          this.$refs.post.innerHTML = JSON.stringify(res.data.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    requestGet() {
     // axios发起get请求，不携带参数,此处是get请求简写，完整写法为 axios.get("/index/index/getData")
      axios("/index/index/getData")
        .then((res) => {
          console.log("get类型请求", res.data);
          this.$refs.get.innerHTML = JSON.stringify(res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

post方式携参请求

// 获取用户数据列表
export const getUser = (params) => {
    return axios.post(`${url}index`, params);
}

get方式携参请求

// 获取用户数据列表
export const getUser = (params) => {
    return axios.get(`${url}index`, {
        params: { ...params }
    });
}

vue跨域的思路

vue-cli内置了一个服务器，默认端口为8000
当使用vue请求不同域名的后端接口时，会产生跨域报错
要解决该问题，需要借助vue内置的服务器，作为中转站(也可以理解为房租租赁里的中介 / 借力跳板)
因为服务器与服务器之间是不受浏览器跨域限制的，跨域只有触发了浏览器的同源策略才会产生
所以才需要配置下面vue.config.js中的devServer.proxy，以让vue服务器帮我们请求真实的api地址获取资源

跨域解决(一

上述两个方法requestPost和requestGET分别用于发起一个post类型ajax请求和get类型的ajax请求
请求的api地址分别是：

1. http://abc.yongheng.work/api/Test/index
2. http://abc.yongheng.work/index/index/getData
   但可以看到axios中只写了剔除域名后的后半段地址，并没有写全
   这是为了解决vue中跨域问题，需要进入到与src同级目录的vue.config.js
   配置vue-cli(vue脚手架)中跨域配置项devServer.proxy，对请求的api分别进行跨域配置

跨域解决(二

进入vue.config.js
第一种简便方式（不推荐使用
直接配置devServer.proxy为要请求的api域名
但这样在vue项目中，不可能只请求一个域名，所以这种方式不推荐

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: 'http://abc.yongheng.work',
  }
})

第二种简便方式（推荐使用
在配置项devServer.proxy中，分别为不同路径进行配置信息,可以对不同路径进行不同的api配置
例如此处/api和/index，分别对以api开头和以index开头的api路径分别进行了配置
api开头路径对应： http://abc.yongheng.work/api/Test/index
index开头路径对应： http://abc.yongheng.work/index/index/getData

1. target解释：真实请求的域名网址，可以分别对不同的路径进行不同的域名配置，解决了vue项目中多域名接口的问题。
2. target补充：会自动拼接axios中的请求路径，组成完整的api请求路径，例如此处的http://abc.yongheng.work + 上面的/api/Test/index = http://abc.yongheng.work/api/Test/index
3. ws解释：是否开启支持ws协议(websocket协议)
4. changeOrigin解释：是否隐藏真实请求来源，让服务端无法区分真实请求来源
5. pathRewrite解释：相当于后端的nginx伪静态重写功能，此处^/index的含义是：找到路径中的index将其替换为index,相当于把http://abc.yongheng.work/index/index/getData替换为了http://abc.yongheng.work/index/index/getData(是的，从作用来说没啥用，只是演示一下可以替换请求路径...)，
6. pathRewrite补充：但从另一个角度来说，pathRewrite的作用是：前端可以写假的api地址，例如sss，然后使用pathRewrite改写为真实地址路径，这可以隐藏api的真实地址路径，因为在浏览器中只能看到http://abc.yongheng.work/sss，而不是http://abc.yongheng.work/真实地址路径

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://abc.yongheng.work',
        ws: true,
        changeOrigin: true
      },
      '/index': {
        target: 'http://abc.yongheng.work',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/index': '/index',
        },
      },
    }
  }
})