如何解决前后端分离出现的跨域问题

1.前端vue3的解决方法

前端通过通过反向代理来解决方法 

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  server:{
    proxy: { 
      '/api': {
        target: 'http://localhost:8080/',  //你要跨域访问的网址
        changeOrigin: true,   // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径把路径变成空字符
      }
    }
  }
})

2.后端的解决方法

配置SpringBoot的跨域

package com.boot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

注意：在Vue项目中，如果你配置了前端代理（例如使用Vite或Vue CLI的代理设置）来处理跨域请求，后端通常不需要再额外配置CORS（跨源资源共享）头部。这是因为前端代理服务器会将请求转发给后端服务器，并且在转发过程中处理跨域的问题。前端代理实际上充当了一个“中间人”的角色，使得浏览器认为请求是发往同一个源，从而避免了跨域限制。

然而，需要注意的是，前端代理的配置是针对开发环境的，用于在开发过程中避免跨域问题。当应用部署到生产环境时，前端和后端通常会被部署到不同的服务器上，这时就需要后端服务器来配置CORS头部以支持跨域请求。

因此，对于生产环境，即使你在Vue项目中配置了前端代理，后端服务器仍然需要正确配置CORS头部来允许来自不同源的请求。这是因为在生产环境中，请求将直接发送到后端服务器，而不是通过前端代理进行转发。

总结来说，Vue项目中配置的前端代理可以解决开发环境中的跨域问题，但生产环境中仍然需要后端服务器进行CORS配置。

所以如果前端配置了反向代理还出现跨域问题，请把后端配置SpringBoot的跨域给补上