题主这里使用的是vue的vue.config.js配置文件来实行跨域问题的解决，详细配置文件如下:

这里放上代码:总目录下创建 vue.config.js这一文件,代码如下:

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
    //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

    // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
    outputDir: "mycli3",
    //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "assets",
    //指定生成的 index.html 的输出路径  (打包之后，改变系统默认的index.html的文件名)
    // indexPath: "myIndex.html",
    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,

    //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
    // lintOnSave: process.env.NODE_ENV !== 'production',

    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
    // runtimeCompiler: false,

    /**
     * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
     *  打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
     *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
     *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
     * */
    productionSourceMap: false,

    // 它支持webPack-dev-server的所有选项
    devServer: {
        host: "localhost",
        port: 8081, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

        // 配置多个代理
        proxy: {
            "/api": {
                target: "http://localhost:5001",// 要访问的接口域名
                ws: true,// 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
                }
            }
        }
    }
};

  2.proxy中target是后端的端口地址格式一定要正确"http://localhost:端点这种.

    下面放上我的前端vue代码:

login(){
        console.log('用户名='+this.loginForm.username,'密码='+this.loginForm.password)

    this.$http.post("api/user/select", this.loginForm,).then(function (res) {
        console.log(JSON.stringify(res))
        console.log(JSON.stringify(res.status))
        console.log(JSON.stringify(res.body))
        this.$message({
            offset: 60,
            message: "登录成功",
            type: "success",
            duration: 600,
        });
        // 将登录成功之后的 token，保存到客户端的 sessionStorage 中
             window.sessionStorage.setItem("token", res.data.token);
             window.localStorage.setItem(
            "user_name",
            this.loginForm.username,
        );

            if (res.status === 200) {
                setTimeout(() =>{
                    this.$router.push({path:"/Home"});
                },3000);

            } else {
                window.alert("账号或密码不正确!")
            }

        }).catch(res => {
            console.log(res.msg)
        }
    )

 这里使用的是function函数作为返回值的接受对象所以接受到的参数如下

{"url":"api/user/select","ok":true,"status":200,"statusText":"OK","headers":{"map":{"connection":["close"],"content-type":["application/json"],"date":["Sat, 31 Jul 2021 03:02:40 GMT"],"transfer-encoding":["chunked"],"x-powered-by":["Express"]}},"body":[{"username":"007","password":"007","status":"200","clms_role":"员工","state":"0","userid":10}],"bodyText":"[{\"username\":\"007\",\"password\":\"007\",\"status\":\"200\",\"clms_role\":\"员工\",\"state\":\"0\",\"userid\":10}]"}

我们直接res.数据就能够拿出来数据.

PS:如果你的后端接口地址不正确的话那么是读取不到后端的值的，读取到后端的值我们就可以进行后面的操作.

附上查询表格的代码

initCartable(){
  // get方式不支持json数据
  var that=this;
  this.$http.post("api/user/all",).then(function(resp){
    console.log(JSON.stringify(resp.data.success))
    console.log(JSON.stringify(resp.data))
    console.log(resp)
    console.log(JSON.stringify(resp))
    that.tableData=resp.body
    this.message.success(resp.data.success);

  });

4.关于后端idea的使用创建

  与传统的springboot后端相比，我抛弃了service层的调用，只使用了mapper层来银蛇查询和xml文件.

这里是按照cloud分布式的创建来实现的,附上我的mapper层代码

 mapper.xml层代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xyh.client.mapper.Usermapper">
      这里是我自己创建的两个实体类
    <resultMap id="User" type="com.xyh.client.pojo.entiy.User" autoMapping="true">
        <id property="clms_id" column="clms_id"/>
        <result property="username" column="username"/>
        <result property="password" column="password"/>
        <result property="status" column="status"/>
        <result property="clms_role" column="clms_role"/>
        <result property="state" column="state"/>
    </resultMap>

    <resultMap id="All" type="com.xyh.client.pojo.entiy.All" autoMapping="true">
        <id property="clms_id" column="clms_id"/>
        <result property="clms_carname" column="clms_carname"/>
        <result property="username" column="username"/>
        <result property="password" column="password"/>
        <result property="clms_carmoney" column="clms_carmoney"/>
        <result property="clms_type" column="clms_type"/>
        <result property="clms_role" column="clms_role"/>
        <result property="status" column="status"/>
        <result property="state" column="state"/>
    </resultMap>


    <select id="selectclms_car" resultMap="User">
     select clms_id,username,password,status,clms_role,state from
     clms_car where username=#{username} and password=#{password}
    </select>

    <select id="selectclms" resultMap="All">
       select * from clms_car
    </select>



</mapper>

3.controller层代码:

package com.xyh.client.controller;


import com.xyh.client.mapper.Usermapper;
import com.xyh.client.pojo.entiy.All;
import com.xyh.client.pojo.entiy.User;
import com.xyh.client.pojo.vo.Loginvo;
import com.xyh.client.service.Userservice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;


@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private Usermapper usermapper;


    @PostMapping ("/select")
    public List<User> selectclms_car(@RequestBody Loginvo loginvo){
//        Loginvo loginvo1=new Loginvo("001","001");
        List<User> users= usermapper.selectclms_car(loginvo);
        System.out.println(users.toString());
        return users;
    }

    @PostMapping ("/all")
    public List<All> selectclms(){
        List<All> users= usermapper.selectclms();
        System.out.println(users.toString());
        return users;
    }



}

 前端调用查询到的结果如下:

 这是我的application.properties

server.port=5001
spring.application.name=clms-clint

spring.datasource.druid.username=root
spring.datasource.druid.password=123456
spring.datasource.druid.url=jdbc:mysql://localhost:3306/clms?serverTimezone=Asia/Shanghai&characterEnconding=utf8
spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
# 初始化连接池个数
spring.datasource.druid.initial-size=5
# 最小连接池个数——》已经不再使用，配置了也没效果
spring.datasource.druid.min-idle=2
# 最大连接池个数
spring.datasource.druid.max-active=20
# 配置获取连接等待超时的时间，单位毫秒，缺省启用公平锁，并发效率会有所下降
spring.datasource.druid.max-wait=60000
# 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
spring.datasource.druid.time-between-eviction-runs-millis=60000
# 配置一个连接在池中最小生存的时间，单位是毫秒
spring.datasource.druid.min-evictable-idle-time-millis=300000

#注册中心的配置
spring.cloud.nacos.server-addr=localhost:8848

#mybatis日志文件以及映射文件
mybatis-plus.mapper-locations=classpath*:/mapper/**/*.xml
logging.level.com.xxx.system.mapper=debug

#公钥私钥文件路径
xxx.key.pubKeyPath=E:\\auth_key\rsa_key.pub
xxx.key.priKeyPath=E:\\auth_key\rsa_key

实现数据交互了就可以访问后端的数据了。上我的项目界面:

1.

2.

3.

4.

今天的代码就先到这里了我们明天再见!

提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点

一、添加后端访问依赖

1. 进入前端vue项目，进入内部或外部终端

2. 输入如下代码并安装

   cnpm install axios --save
   cnpm install qs --save
   

3. 安装好之后可以在package.json中看到添加的依赖
   

4. 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖）

   1. 引入依赖
      
   2. 设置别名
      
   3. 在组件文件中通过 this.$axios.xxx 等即可使用依赖

二、建立后端

后端的建立可参考基于 Spring Mvc 一个简单项目的基本流程 ＜用户注册功能＞(校正版)的第一、二步，建立符合自己前端的后端。
处理跨域问题 ：前后端分离开发后，前后端的访问最主要的问题即跨域，即对于http的请求，为了安全，禁止ip地址和不同端口的程序项目访问，准确说仅可以访问但不响应。由于采用SpringBoot，所以通过在控制器中添加注解来解决。

三、配置前端

直接上前端的JS处代码

<script>
    export default{
        name:'Users',
        data() {
            return {
                emp:{
                    ename:'',
                    loSal:'',
                    hiSal:'',
                    deptno:'',
                },
                depts:[],
                emps:[],
                pageNum:1,//当前页
                pageTotle:0 ,//总条数
                pageSize:4   //每页显示几条
            }
        },
        methods:{
            // 定义页面加载方法(例如搜索按钮触发该事件)
            init(){
                // ###打包参数###
                this.emp.pageNum=this.pageNum;//JS中变量可以动态自动添加，可以不实现定义emp.pageNum
                this.emp.pageSize=this.pageSize;
                // 把json对象转为字符串
                var param=this.$qs.stringify(this.emp);// 将emp数据转为字符串，作为参数上传

                // ###参数传递、结果接收###
                this.$axios // 将参数上传到后台的服务器端口8088、访问路径/vue、以及控制器与方法的RequestMapping路由
                    .post("http://localhost:8088/vue/emp/findByParam",param) //参数传递
                    .then(rst => { // 结果接收
                        console.log(rst);//如果获取了结果就在控制台打印
                        // vue前端将返回的后端返回的结果用data封装，而rst是包含了data以及其他参数的总结果集合
                        this.emps = rst.data.list;
                        this.pageTotle = rst.data.total;
                    }).catch(ex => {
                        console.log(ex);//如果没获取结果，就打印错误
                    });
            },
            // 定义Search方法
            search(){
                // 即页面加载方法
                this.init()
            }
        }
    }
</script>

重点在于参数的目的地是 “http://localhost:8088/vue/emp/findByParam” ，这串链接的来源如下：

http://localhost:8088/vue

/emp/findByParam