做出反应。客户端阻止了从端口3000到Spring Boot 8080的JS请求

Question

我在 Spring Boot 中有一个后端应用程序在端口 8080 上运行，前端 React.js 项目在端口 3000 上运行。我们正在从 React.js（端口 3000）向 Spring Boot /authenticate endpoint（端口 8080）发送请求，在那里它验证登录信息并发回响应。在我自己的计算机上运行这两个应用程序时，这非常有效。但是，我们需要使用 vm 并在单独的 docker 容器中运行应用程序。当前端位于容器中时，只有主机可以访问端口 3000。这是我们用于前端的 Dockerfile：

FROM node:alpine
RUN mkdir /app
WORKDIR /app
COPY package.json /app
COPY package-lock.json /app
RUN npm install
RUN npm install cors
COPY . /app
CMD ["npm", "start"]

这是我们使用的docker run命令：

docker run -it -p 3000:3000 --name frontend-react group09/frontend-react

为了允许主机以外的其他用户到达端口3000，我们使用ngin x代理将流量从端口80路由到3000。然而，当我们这样做时，我们在控制台中收到了一条ERR： BLOCKED BY CLIENT消息。我还将附加我们在Spring Boot中使用的SecurityConfig：

 @Override
    protected void configure(HttpSecurity http) throws Exception {
        // Allow JWT authentication
        http.cors().and().csrf().disable()
                .authorizeRequests()
                .antMatchers("/authenticate").permitAll()
                .anyRequest().authenticated()
                .and().sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS);

        // Enable our JWT authentication filter
        http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);

        // Necessary authorization for each endpoint will be configured by each method, using @PreAuthorize
    }

Cors 配置：

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000","http://localhost:3000/","http://localhost:3000/login"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("authorization", "withCredentials","content-type", "x-auth-token","Access-Control-Allow-Credentials","access-control-allow-origin","Access-Control-Allow-headers"));
    configuration.setExposedHeaders(Arrays.asList("x-auth-token","set-cookie"));
    configuration.setMaxAge(Duration.ofSeconds(5000));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

我真的很感激任何关于如何解决这个问题的建议。我们非常确定问题不在代码中，因为在docker容器之外运行时，它完全可以运行。

Answer 1

我花了整整20个小时才解决了这个问题。基本上，我们必须将AllowedOrigins设置为*，以便允许所有IP。为此，您还必须将AllowCredentials设置为false。

Answer 2

您是否检查了请求中的< code>referrer字段？在这种情况下，很可能不是localhost，而是您的域名。

在这种情况下，您需要将 frontend_domain_name：3000 添加到 cors 策略允许的源字段中。

更新：实际上，建议将允许的来源设置为*的答案禁用了CORS，因为它允许所有域访问您的后端代码，而不仅仅是您的前端部分。正确的方法是添加your_frontend_domain_name： 3000作为允许的来源。这样，您的后端只能由通过您的前端网站工作的用户访问。