本文记录使用axios请求后台的操作，可参看文档 进入

1 下载 axios 相关包

在 Idea 控制台输入，如果npm不能直接下载相关的辅助包，则推荐查看博文

1 安装 axios: npm install axios
2 刷新项目中的包: npm install 
3 发布前端工程: npm run serve 

配置Axios请求

request.js 代码

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8081',//此处为后台程序的端口号
  timeout: 3000
});
export default instance;

api/user.js 代码，注意user.js主要存储和User对象相关的操作

import request from '../utils/request'
/*
后面每次请求都需要携带token
 */
export const findDList = () => {
  return request({
    url: '/system/ddict/findDList',
    method: 'get'
  })
}

主页调用

<script>
import { findDList } from '../../api/user'
export default {
  name: 'Users',
  },
  created () {
    // 创建组件的时候 调用医生信息查询
    this.getDList();
  },
  methods: {
  //异步请求
    async getDList(){
     const {data} = await findDList()
      console.log(data);
    }
  }
}
</script>

上面配置完，在访问时，会出现跨域问题，即Access-Control-Allow-Origin问题

解决跨域

解决跨域问题的方法有很多：
1 jsonp解决跨域问题
2 nginx反向代理解决跨域问题
3 @CrossOrigin 解决跨域问题
4 配 WebMvcConfigure解决跨域问题
…

法(1) 其中最简单的当然是基于注解，在相应的controller上方添加 @CrossOrigin 解决跨域

法(2) 如果有些情况下注解无法满足跨域的问题，则需要手动配置configuration，具体操作如下：

CrosConfig.java 相关代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration //注解不能丢，丢了不会起效
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS","HEAD")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

测试