React.JS 从端口 3000 到 Spring 引导 8080 的请求被客户端阻止

Question

我在 Spring Boot 运行ning 端口 8080 上有一个后端应用程序，前端 React.js 项目运行ning 在端口 3000 上。我们正在发送一个请求从 React.js（端口 3000）到 Spring Boot /authenticate 端点（端口 8080），它在其中验证登录信息并发回响应。当运行在我自己的计算机上同时运行这两个应用程序时，这非常有效。但是，我们需要在单独的 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 运行命令：

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

为了允许主机以外的其他用户访问端口 3000，我们使用了 nginx 代理将流量从端口 80 路由到 3000。但是，当我们这样做时，我们在控制台中收到一条错误：被客户端阻止的消息。我还将附上我们在 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

您是否检查了请求中的 referrer 字段？在这种情况下，很可能不是本地主机，而是您的域名。

在这种情况下，您需要将 frontend_domain_name:3000 添加到您的 cors 策略 allowed origin 字段。

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

Answer 2

经过 20 个小时的努力，我解决了这个问题。基本上我们必须将 AllowedOrigins 设置为 *，以便允许所有 IP。为此，您还必须将 setAllowCredentials 设置为 false。

React.JS 从端口 3000 到 Spring 引导 8080 的请求被客户端阻止

React.JS Request from port 3000 to Spring Boot 8080 blocked by client

java

networking

docker

reactjs

spring-boot