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

Question

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

3 个带有组合(客户端+服务器+数据库)的 docker 容器，一切都在本地主机上运行。我可以按预期访问前端、登录/注册和使用 Web 服务。

client: localhost:3333
server: localhost:8080

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

192.168.1.x:3333
192.168.1.x:8080

问题:

如果我尝试在另一台机器(同一网络)或 my- ip:333(另一个网络)它可以工作，但按登录/注册不会工作。 (这只适用于主机)

开发工具 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 的建议进行了尝试，但仍然无法正常工作。

1. 未指定 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;
    }

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

编辑 2(24/05/2022)

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

获取(URL + '/api/account/login', {

Dockerfile 客户端

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

这是你的错误

Failed to load resource: net::ERR_CONNECTION_REFUSEDlocalhost:8080/api/account/login:1 TypeError: Failed tofetch

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

React 前端通常在客户端浏览器中运行(如果您没有另外配置它​​)，我想这里也是这种情况。

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

但是当客户端位于网络内的其他机器上时，前端(客户端浏览器)再次尝试调用 localhost:8080 但该机器没有在本地运行服务器。因此错误。

解决方案

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