跨域解决方案

22:30Plane-Moon2025-08-10 0:34

跨域解决方案：

1.后端配置：在Controller类上添加@CrossOrigin注解。

java 复制代码

@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")
@RestController@RequestMapping(value = "/api/v1/customers", produces = MediaType.APPLICATION_JSON_VALUE)
public class CustomerApi {

2.前端配置：在vite.config.js中配置跨域。此时，axios发送请求时，可使用相对路径，会被自动代理为后端服务器路径。

javascript 复制代码

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from "vite-plugin-vue-devtools";
import {resolve} from "path";
export default defineConfig({
    plugins: [vue(), vueDevTools()],
    server: {
        host: "localhost",
        port: 5173,
        open: true,
        proxy: {
            "/api":{
                target: "http://localhost:8080",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '/api/v1')
            }
        }
    },
})