你了解vue跨越请求吗？(vue的axios跨域请求)

        前端和服务器请求数据是很常见的事情，毕竟数据不是死的，而是通过请求服务器给我们返回的动态数据，这样才能保证数据的动态化，那么，在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', '*')可以让所有的端口都可以访问这个服务器