前端发送网络的方法有多种：

1.AJAX (ES5)

2.Fetch （ES6）

3.axios（第三方插件）

使用方法：

一、下载

因为axios为第三方插件，在任何项目中如果需要使用，都需要先下载才能使用

npm i axios

二、使用

1.引入，在需要使用axios的文件中引入

import axios from 'axios';

2.使用，axios其实是一个方法，比如获取学生的数据

export default{ created(){         this.getStudents() ； //调用getStudents() 这个方法}   methods：{         async  getStudents(){     通过await接收请求结果，await是异步函数，所以前面getStudents方法要加上async，await跟async是成对出现                  const res= await  axios（{              //通过axios发生请求      //请求地址（服务端的地址资源地址students）          url：“ ”，      //请求类型          method：‘GET’，    }）    console.log(res);  },},}

3.前端跟后端不在同一个服务器请求会报错。vue项目创建时会自动搭建一个小型服务器，地址为 localhost：8080（ip地址：8080）。跟后端的服务器地址不一样。一个服务器向另一个服务器发送请求，浏览器“同源策略”限制不允许跨域，所以会报错。

处理跨域问题：

vue.config.js文件：

//当前文件配置发生变化，项目需要重启module.exports=defineConfig({  devServer:{  proxy：{   '/api’：{      //匹配项目中所有以api开通的请求  target：‘’， //目标请求的路径，目标服务器地址    changeOrigin：true，//解决跨越    pathRewrite:{  '^/api' : ' '   //把发送到服务器端后把/api去掉，替换成空字符串          }       }    }   }}）

因为匹配了/api请求，所以axios请求地址会发生变化：

export default{ created(){         this.getStudents() ； //调用getStudents() 这个方法}   methods：{         async  getStudents(){     通过await接收请求结果，await是异步函数，所以前面getStudents方法要加上async，await跟async是成对出现                  const res= await  axios（{              //通过axios发生请求      //请求地址          url：“/api/students ”，//原服务端的地址‘’‘’变为‘’/api‘’      //请求类型          method：‘GET’，    }）    console.log(res);  },},}

这样axios请求基本完成，同时解决跨越问题的报错。

跨域图示：

什么是跨域