前后端解决跨域的问题

前端的接口链接为：http://localhost:5173
后端的接口链接为：http://localhost:9081/api

1. 后端解决跨域问题

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 来源
                .allowedOrigins("http://localhost:5173/")
                .allowedOrigins("*")
                // HTTP 方法
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                // 请求头
                .allowedHeaders("*")
                // 启用 cookie
                .allowCredentials(true)
                // 缓存时间
                .maxAge(3600);
    }
}

• 前端基于axios发送post，get等请求

// 定义请求的实例

// 导入axios
import axios from "axios";
// 定义一个变量,记录公共的前缀,baseURL
// const baseURL = "http://localhost:9081"
const instance = axios.create({
    baseURL: "http://localhost:9081/api",
    timeout: 10000,
})

// 添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        console.log("请求拦截器", config);
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        console.log("响应拦截器", response);
        return response.data;
    },
    function (error) {
        // 对响应错误做点什么
        console.log("响应错误拦截器", error);
        return Promise.reject(error);
    }
);
export default instance;

前端接口请求示例：

// 导入axios
import axios from "axios";
import instance from "../utils/request";
// 获取用户信息-在请求或响应被then或catch处理前拦截他们
export async function getUserInfo() {
    return await instance.get("/vue/list");
    // try {
    //     const result = await instance.get("/api/vue/list");
    //     console.log("获取用户数据成功:" + JSON.stringify(result));
    //     return result.data.data;
    // } catch (err) {
    //     console.log("获取出错了：" + err);
    //     throw err; // 抛出错误以便在调用处处理
    // }
}

// 搜索用户信息
export async function searchUser(searchQuery) {
    console.log("简化搜索用户");
    return await instance.get(`/vue/search?searchContent=${searchQuery}`);
}

export async function searchUserBack(searchQuery) {
    try {
        const result = await instance.get(`/vue/search?searchContent=${searchQuery}`);
        console.log("搜索成功了:" + JSON.stringify(result));
        return result.data.data;
    } catch (err) {
        console.log("搜索出错了：" + err);
        throw err; // 抛出错误以便在调用处处理
    }
}

export async function registerUser(payload) {
    console.log("简化用户注册");
    const param = new URLSearchParams();
    for (let key in payload) {
        param.append(key, payload[key])
    }
    return await instance.post(
        "/vue/register",
        payload
    );
}

2. 前端解决跨域问题

2.1 后端接口调整：

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 来源
                .allowedOrigins("*")
                // HTTP 方法
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                // 请求头
                .allowedHeaders("*")
                // 启用 cookie
                //.allowCredentials(true)
                // 缓存时间
                .maxAge(3600);
    }
}    

2.2 前端request.js文件调整

// 导入axios
import axios from "axios";
// 定义一个变量,记录公共的前缀,baseURL
// const baseURL = "http://localhost:9081"
const instance = axios.create({
    baseURL: "/apiPre",
    timeout: 10000,
})

2.3 前端vite.config.js文件调整

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/apiPre': {
        target: 'http://localhost:9081/api',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/apiPre/, ''),
      },
    },
  },
})