提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着前端水平的提高，难免会用到一些跨域请求访问获取数据的要求，为了达到这一要求写了这篇文章供大家学习

一、Axios是什么？

Axios是一个基于Promise的JavaScript HTTP客户端库，可以运作在浏览器端和Node.js环境中，用来发送HTTP请求。它支持浏览器和Node.js环境，具有易用性和灵活性，并且具有诸如拦截请求和响应，取消请求，转换请求数据和响应数据、自动转换JSON数据，客户端支持防御XSRF等高级功能

二、使用步骤

1.下载axios组件库

在对应终端中输入代码如下：

npm install axios

1.2.引入库

代码如下：

import axios from 'axios'     //引入库 

该处使用的url网络请求的数据。

---

2.配置代理服务器

2.1  在vuecli的工程脚手架项目中找到vue.config.js文件，有则打开，无则新建

2.1  配置代理服务器，代码如下：（注意配置的网址）

module.exports = {
    
    devServer: {
      proxy: 'http://localhost:5000' //配置代理服务器（域名为本地，端口为响应方的端口号）
    }
  }

 注意：配置完后必须重新启动vuecli脚手架服务才会生效！！！

  3.配置跨域请求

整体代码如下：（代码来源于一个自定义组件中，如要时间需要再App.vue中注册组件）

<template>
  <div>
  <button @click="getInfo()">获取学生信息</button>
 
    <h4>{{ data1 }}</h4>
    </div>
 
</template>

<script>
// 何为跨域？
// 答：一个网址去访问另一个网址，但是其中有协议名，域名，端口号中有一个不一致都是跨域请求
// 步骤：
// 1.下载axios并引入组件
// 2.配置代理服务器
// 3.配置跨域请求

import axios from 'axios'     //引入库
export default {
    name:"Axios1",
    data() {
      return {
        data1:''
      }
    },
    methods:{
      getInfo(){
        axios.get('http://localhost:8080/students').then(    //配置访问地址
          response=>{console.log('请求成功了',this.data1=response.data)},
          error=>{
            console.log('请求失败',error.message)
          }
        ) }}
}
</script>

<style>

</style>