springboot3 security6 vue3 前后端分离跨域

跨域问题是指前端页面向不同的源请求数据时，由于浏览器同源策略的限制，导致请求失败的问题。

在 Spring Boot 中，可以通过使用 Spring Security 解决跨域问题，同时在 Vue 中也可以通过配置代理解决跨域问题。

以下是 Spring Boot + Spring Security + Vue 前后端分离跨域的解决方法：

1. 启用 Spring Security

在 Spring Boot 项目中，可以通过使用 Spring Security 来添加安全性。可以通过在 pom.xml 文件中添加以下依赖来启用 Spring Security：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

2. 添加跨域配置

在 Spring Security 中，可以通过添加跨域配置来允许跨域请求。可以在 WebSecurityConfigurerAdapter 类中添加以下配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

这里我们设置了允许任何来源的请求，允许 GET、POST、PUT、DELETE 方法的请求，并且允许 content-type 头部的信息。

3. 配置代理

在 Vue 中，可以通过配置代理来解决跨域问题。可以在 vue.config.js 文件中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里我们设置了代理地址为 http://localhost:8080，将所有以 /api 开头的请求转发到代理地址，并且开启了 changeOrigin 选项，解决跨域问题。

现在我们就成功地解决了 Spring Boot + Spring Security + Vue 前后端分离跨域的问题。