java项目在后端做跨域配置

在 common 目录下新建 CorsConfig.java 跨域配置文件

package com.longchi.common;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
 * 跨域配置
 **/
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1, 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2, 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3, 设置访问源请求方法
        source.registerCorsConfiguration("/**",corsConfiguration);
        // 4, 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

验证跨域配置文件 src/view/Home.vue

<template>
	<div>
		<div class="card" style="margin-bottom: 5px">
			<el-input style="width: 260px;margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
			<el-button type="primary">查 询</el-button>
		</div>
		<div class="card" style="margin-bottom: 5px">
			<el-button type="danger">批量删除</el-button>
			<el-button type="primary">新增</el-button>
			<el-button type="success">批量导入</el-button>
			<el-button type="info">批量导出</el-button>
		</div>
		
		<div class="card" style="margin-bottom: 5px">
			<el-table :data="data.tableData" style="width: 100%" :header-cell-style="{color: '#333', backgroundColor: 'eaf4ff'}">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="name" label="名称" width="188" />
				<el-table-column prop="phone" label="电话" />
				<el-table-column prop="address" label="名称" width="188" />
			</el-table>
		</div>
		<div class="card">
			<el-pagination 
                v-model:current-page="data.pageNum" 
                :page-size="data.pageSize" 
                layout="total,prev,pager,next" 
                :total="data.total" 
            />
		</div>
	</div>
</template>
<script setup>
import axios from 'axios';
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
	name: null,
	pageNum: 1,
	pageSize: 5,
	total: 6,
	tableData: [
		{name: '青哥哥',phone: '13877886677',address:'北京市朝阳区'},
		{name: '小武哥哥',phone: '13977886677',address:'上海市徐汇区'},
		{name: '小张哥哥',phone: '13877886654',address:'安徽省合肥市'},
		{name: '小李哥哥',phone: '13877546677',address:'北京市东单区'},
		{name: '小王哥哥',phone: '13877886688',address:'上海市长宁区'},
		{name: '青哥哥',phone: '13877886699',address:'上海市闵行区'},
	]
})

// 拿到后台接口数据(后端给前端返回的数据, 赋值给前端页面展示的数据)
axios.get('http://localhost:9999/admin/selectAll').then(res => {
    console.log(res);
})
</script>

启动后端 mvn spring-boot:run

启动前端 npm run dev

看到上图表示前后端启动成功，访问 http://localhost:5173/manager/home

Fetch/XHR: 表示前端VUE发起的所有请求都在这里