后端仅适用于 localhost React + Springboot + docker

Question

我正在尝试部署 React + Spring 引导应用程序。

3 docker 个具有组合（客户端+服务器+数据库）的容器，一切都在本地主机上运行。我可以访问前端，login/register，并按预期使用 Web 服务。

client: localhost:3333
server: localhost:8080

一旦我尝试将它部署在另一台机器上（桌面 w/ ubuntu 服务器），我就能够访问前端/后端并通过邮递员发送请求（例如：POST 一个新用户到192.168.1.x:8080/api/account/register.)

192.168.1.x:3333
192.168.1.x:8080

问题：

如果我尝试在另一台机器（同一网络）或 my-ip:333 中访问 192.168.1.x:3333 或 192.168.1.x:8080 （另一个网络）它可以工作，但按 Login/Register 不会工作。（这只适用于主机）

开发工具 Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/api/account/login. (Reason: CORS request did not succeed). Status code: (null).

开发者工具 Chrome:

Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:8080/api/account/login:1          
TypeError: Failed to fetch

编辑（2022 年 5 月 23 日）

我仍然无法解决问题

WebSecurity.java

@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {
    private UserDetailsService userDetailsService;
    private BCryptPasswordEncoder bCryptPasswordEncoder;

    @Autowired
    private DataSource dataSource;

    public WebSecurity(UserDetailsService userDetailsService, BCryptPasswordEncoder bCryptPasswordEncoder) {
        this.userDetailsService = userDetailsService;
        this.bCryptPasswordEncoder = bCryptPasswordEncoder;
    }


    @Override
    protected void configure(HttpSecurity http) throws Exception {

        // Comment to disable authentication
        http.cors().and().csrf().disable().authorizeRequests().antMatchers(HttpMethod.POST, ACESSABLE).permitAll()
                .anyRequest().authenticated().and().addFilter(new JWTAuthenticationFilter(authenticationManager()))
                .addFilter(new JWTAuthorizationFilter(authenticationManager()))
                // this disables session creation on Spring Security
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }

    @Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        // auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder);
        auth.jdbcAuthentication().dataSource(dataSource)
                .usersByUsernameQuery("select username, password, 1 from users where username=?")
                .authoritiesByUsernameQuery(
                        "select u.username, r.name from users_roles ur, users u, role r where u.username = ? and ur.users_id = u.id and ur.role_id = r.id")
                .passwordEncoder(bCryptPasswordEncoder);
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        System.out.println("setting cors configuration");
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.applyPermitDefaultValues();
        source.registerCorsConfiguration("/**", configuration);

        return source;
    }

}

WebConfig.java

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        AntPathMatcher matcher = new AntPathMatcher();
        matcher.setCaseSensitive(false);
        configurer.setPathMatcher(matcher);
    }
}

我尝试了什么

按照@Knox 的建议进行了尝试，但仍然无法正常工作。

未指定 allowedOrigins 会断开主机上前端和后端之间的连接（缺少 CORS“Access-Control-Allow-Origin”），但从外部看它只是显示与 allways 相同（CORS 请求没有成功）。

@Bean
    CorsConfigurationSource corsConfigurationSource() {
        System.out.println("setting cors configuration");
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration configuration = new CorsConfiguration();
        //configuration.applyPermitDefaultValues();
        //configuration.allowedOrigins("*");
        source.registerCorsConfiguration("/**", configuration);

        return source;
    }

将我的 WebConfig.java 与@Knox 提供的交换，一切都在 HOST 上运行，仍然（CORS 请求未成功）来自外部

编辑 2 (24/05/2022)

刚刚注意到我的前端容器 (React) 没有响应更改...我的猜测是 URL 我已经更改了很多次，但在 docker compose 重启时从未得到更新。因此，如果我能让容器重新加载，将 URL 从 localhost:8080 更改为 myip:8080 可能会修复它。

fetch(URL + '/api/account/login', {

Docker文件客户端

FROM node:8

WORKDIR /usr/scr/app
COPY package*.json ./

RUN npm install
COPY . .

CMD ["npm", "start"]

Docker-compose.yml

  client:
    build: ./client
    ports:
      - 3333:3000
    volumes:
      - ./frontend:/usr/src/app
      - /usr/src/app/node_modules
    networks:
      - network_backend

Answer 1

请求失败，因为您缺少 CORS 配置。

由于 Same-origin policy.

，您的浏览器通常会阻止从一个来源（在您的情况下为 http://192.168.1.x:3333）到另一个来源（http://192.168.1.x:8080）的请求

如果您希望允许来自不同来源的请求到您的后端，您需要配置您的后端以使用适当的 CORS headers 响应告诉浏览器允许从特定的不同来源访问。

当运行本地主机时，您的请求可能会成功，因为浏览器对本地主机会更宽松，而不是可以公开托管的东西。

描述了 Spring Boot 中配置 CORS 的方法 here，其中一种方法是 annotation-based:

@CrossOrigin("http://192.168.1.x:3333")
@RestController
public class MyCrossOriginController {

    // this should now allow requests with an origin of http://192.168.1.x:3333)
    @PostMapping("/api/account/register")
    public Object register(...) {
        // ...
    }

有关 @CrossOrigin 注释的更高级功能，请参阅 Javadocs。

或者，您可以通过 WebMvcConfigurer 注册它以使其在全局或通过路径应用：

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins(
                    "http://192.168.1.x:3333",
                    "http://localhost:3333");
    }
}

以上允许托管在 http://192.168.1.x:3333 和 http://localhost:3333 的前端使用 /api/... 端点。

Answer 2

这是你的错误

Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:8080/api/account/login:1 TypeError: Failed to fetch

在 React 中，您已经配置了 URL，前端将使用它来调用后端服务器。在该配置中，您错误地将 url 配置为 localhost:8080。

React 前端通常在客户端浏览器中运行（如果您没有另外配置），我想这里也是如此。

因此，当客户端的浏览器尝试调用 localhost:8080 时，当客户端位于后端服务器运行的同一台机器上时，它能够这样做，因为同一台机器理解后端服务器运行在 localhost:8080.

但是当客户端连接到网络内的其他机器时，前端（客户端浏览器）再次尝试调用 localhost:8080 但该机器本地没有服务器运行。因此报错。

解决方案

配置 React 应用程序代码，使其用作到达后端的地址而不是 localhost:8080 而是网络中所有主机都知道的某个地址，这意味着服务器所在机器的 IP 地址运行。可能是 192.168.1.x:8080，正如您所说，这可以从运行服务器的机器之外的某些用户访问。

Answer 3

我认为确定允许哪些方法发出 CORS 请求很重要。

@豆子

CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:3333","http://192.168.1.x:3333"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST","PATCH","DELETE"));
            configuration.setAllowCredentials(Boolean.TRUE);
            //configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

后端仅适用于 localhost React + Springboot + docker

Backend only works in localhost React + Springboot + docker

javascript

docker

reactjs

spring-boot

我尝试了什么