前端

在src中创建util文件，写request.js文件：

request.js代码如下：

import axios from 'axios'
import { ElMessage } from 'element-plus';const request = axios.create({// baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！baseURL:'http://localhost:5050', //后端接口地址timeout: 3000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件// if (response.config.responseType === 'blob') {//     return res// }// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {if (error.response.status === 404) {ElMessage.error('未找到请求接口')} else if (error.response.status === 500) {ElMessage.error('系统异常，请查看后端控制台报错')} else{console.log('err' + error.message) // for debug}return Promise.reject(error)}
)export default request

在要引入数据的vue文件中添加导入依赖的reque.js文件

后端

添加Java文件

创建的java文件CorsConfig.java代码如下：

package com.example.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 {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*");
//        corsConfiguration.setAllowCredentials(true);corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");source.registerCorsConfiguration("/**",corsConfiguration);return new CorsFilter(source);}
}

后端跨域的配置可参考几种方法
链接: SpringBoot—CORS跨域问题详解和解决方案