我是Sping Boot 和VueJS的新手。我正在开发一个Web应用程序，使用Vue前端和Sping Boot 后端，通过Google SDK登录Google。前端和后端工作正常，但两者之间的通信不起作用。当我试图通过BackendService.js向后端发出GET调用时，我在浏览器控制台中收到以下错误消息。

Access to XMLHttpRequest at 'BACKEND_URL/match/231' from origin 'FRONTEND_URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET BACKEND_URL/match/231 net::ERR_FAILED 403 (Forbidden)

Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

字符串
以下是我的 Spring 课程www.example.com：

@Configuration
@EnableWebSecurity
public class SecurityConfig{

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.authorizeRequests();
        CorsConfiguration cors = new CorsConfiguration();
        cors.setAllowedOrigins(List.of("FRONTEND_URL"));
        cors.setAllowedHeaders(List.of("*"));
        cors.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", cors);
        http.authorizeRequests().anyRequest().authenticated();
        http.csrf().disable();
        http.cors().disable();
        return http.build();
    }
}

型
公司简介

<modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
        <relativePath/>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>MatchMaker_BE</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>MatchMaker_BE</name>
    <description>MatchMaker_BE</description>
    <properties>
        <java.version>21</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>6.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
            <version>3.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-oauth2-client</artifactId>
            <version>6.2.0</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

型
我的Vue前端的BackendService.js

import axios from "axios";

const BACKEND_BASE_URL = "BACKEND_URL"
//const accessToken = localStorage.getItem("userInfo");
//const headers = {Authorization: "Bearer " + accessToken};

class BackendService{
    getMatch(matchId){
        console.log("Übermittelt match ID: " + matchId);
        const requestURI = BACKEND_BASE_URL + "/match/" + matchId;
        console.log("Übermittelt an: " + requestURI);
        return axios.get(requestURI/*, {headers: headers}*/);
    }
}

export default new BackendService()

型
我还尝试使用另一个www.example.com类，但这并没有改变任何东西

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();

        // Erlaube Anfragen von allen Ursprüngen
        config.addAllowedOrigin("FRONTEND_URL");

        // Erlaube bestimmte HTTP-Methoden (GET, POST, etc.)
        config.addAllowedMethod("*");

        // Erlaube bestimmte HTTP-Header
        config.addAllowedHeader("*");

        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    }
}

型
我已经在我的SecurityConfig中尝试了不同的变体。我认为类WebSecurityConfigurerAdapter不适用于我的Java版本。
我也想过使用我从Google SDK获得的信息作为后端调用的头令牌，但我不知道如何在后端验证令牌时，我根本无法到达它。