前端和服务器请求数据是很常见的事情，毕竟数据不是死的，而是通过请求服务器给我们返回的动态数据，这样才能保证数据的动态化，那么，在vue里如何来发送请求呢？
发送请求其实有很多种方案，比如原生的new XMLHttpRequest()来请求，不过很麻烦，几乎不常用。
然后就是jQuery的封装的一些请求，例如get(),post(),$.ajax()可以简单的来发送请求，但是我们用的是vue框架，所以也不是很推荐用jQuery。
那我们下来先看看vue是怎么来发送请求的吧:
首先是引入axios的资源包，在vue里是推荐用axios发送请求的
npm i axios
下载好后就可以导入axios请求包
import axios from 'axios'
我们在不配置任何的情况下，去发送axios请求:
axios({
url:"/api/eat",
method:"GET",
}).then((res)=>{
console.log(res.data);
},errot=>{
console.log("错误");
})然后我写了一个测试服务器:
const express = require("express");
let app = express();
app.get('/eat',(request,response)=>{
const a = {
name:"苹果",
pre:18,
love:"yes"
}
console.log("有人请求服务器"+request.url);
response.send(a);})
app.listen(5000,()=>{
console.log("5000端口已经开启");})
然后我们去浏览器点击按钮发送请求看看能不能成功
点击发送请求:
可以看到是收不到数据内容的，为什么呢？其实很简单，我们的前端网站服务器端口是8080，去请求5000端口的数据，因为违背了同源策列，所以是不可能请求到数据的。
那么，该如何解决呢？办法有两种，第一种是前端找一个代理服务器帮我们发请求，这样就不用我们自己发了，第二种方法就是通过后端的cors来解决跨域问题，针对前后端的解决方案我们都来看一下。
首先先看一下前端来解决的方法:
vue框架是给我们提供了解决方法的，可以去配置一个中间代理服务器来帮我们请求数据,具体实现如下:
第一步是打开vue的vue.config.js文件夹，修改成如下代码:module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}}
}
然后简单说一下，target里面的值应该怎么设置,target里面要设置成服务器端口
target: 'http://localhost:5000'
我这里的服务器是5000端口，所以这里设置的是5000，大家根据自己端口的不同设置即可
这样设置以后，重启vue-cli就可以生效了，代理服务器就设置完成了，这样就可以完成跨域访问数
据了，我们来看一下最终获取数据情况:
这次就完成了请求数据并返回了数据内容。
那么接下来是第二种后端来解决跨域问题:
在服务器上我们可以设置cors来解决跨域，首先还是安装cors的资源包
npm i cors
安装好后引用require（"cors"）即可,引用完成后，挂载给路由使用就可以完成跨域解决：
let cors = require("cors")
app.use(cors());
最后也是可以收到数据请求：
最后是后端设置response.setHeader('Access-Control-Allow-Origin', '*')可以让所有的端口都可以访问这个服务器
