如何使用Spring Boot后端使Angle App仅接收来自局域网的请求？

Question

我正在开发与JWT认证和弹簧引导后端的角​​应用程序。 目前，我希望我的应用程序仅可用于连接到局域网的所有PC。

对于角度，我尝试ng serve --host 0.0.0.0，我的应用程序可用于网络上所有应用程序的PC上的所有PC，其后为：4200。

spring boot也在同一台PC上运行。

但是，当我尝试从局域网中的另一台PC登录时，我的凭据不起作用，我在chrome控制台中拒绝连接。

在intellij中，我没有收到任何消息，没有迹象表明春季没有任何请求。

在运行角度引导和弹簧引导的PC上，我可以使用相同的凭据成功进行身份验证，而不会出错。

这是我在春季启动中的WebSecurity：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .cors()
        .and()
            .csrf()
            .disable()
        .authorizeRequests()
            .antMatchers("/socket").permitAll()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
        .and()
            .exceptionHandling().authenticationEntryPoint(unauthorizedHandler)
        .and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and()
            .addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
}

我将通往auth（我的身份验证）和套接字的路由留给了所有人。 当我在浏览器中尝试时，运行angular应用程序和spring boot服务器的PC的IP后面是：8080，我的异常处理正在处理它，并显示在intellij“未经授权的错误中。消息-需要完全身份验证才能访问此资源”。

这意味着请求会加入Spring Boot服务器，但是，当然，如果没有凭据，该请求将被关闭。

不同的是，当尝试pc_ip：4200时，呈现了我的角度应用程序，我尝试在chrome控制台中进行身份验证，“连接被拒绝”，当尝试pc_ip：8080时，我在春季收到了请求，但我的异常处理程序处理了该请求。

我在想，我必须在春季进行额外的配置吗？我想念什么？

亲切的问候，

编辑1：这是我尝试登录时在chrome控制台中出现的错误。

编辑2：看来我的角度应用程序正尝试使用http://localhost:8080/api/auth/login而不是pc_ip：8080 / api / auth / login登录，因为这是服务器所在的位置，而不是localhost：8080。有什么想法告诉客户将请求转发到正确的路由吗？

EDIT3：我在spring security中进行了编辑，以允许allowallall应用于所有应用程序。在另一台PC上，我现在可以浏览我的应用程序，键入pc_ip：8080 /并添加我在控制器中定义的任何URL。另外，在pc_ip：4200上，我的角度应用程序仍然存在。我该如何重新设置我的设置，以使另一台PC上只有一个IP运行我的应用程序？

EDIT4：感谢georgeB，我设法解决了几乎所有问题，但是websocket仍然无法在网络中的另一台PC上运行。我附加了一个打印屏幕以显示错误。我不明白，为什么运行的角度和春天有与webbsocket没有问题的，另外一台电脑的所有认证，请求都OK，但WebSocket的是不正常的PC上。

EDIT5：对于脚实现，我使用https://stomp-js.github.io/guide/ng2-stompjs/2018/11/04/ng2-stomp-with-angular7.html

实现很简单：

export const myRxStompConfig: InjectableRxStompConfig = {
 brokerURL: 'ws://localhost:8080/api/socket',
heartbeatIncoming: 0, 
heartbeatOutgoing: 20000, 
reconnectDelay: 200,
}; 

然后在决赛中我加

const config: InjectableRxStompConfig = { ...myRxStompConfig, 
connectHeaders: headers};
   this.rxStompService.configure(config);
  this.rxStompService.activate();
  this.rxStompService.watch('/topic/server-broadcaster')
 .subscribe((message: Message) => {
 });

Answer 1

您应按照说明创建后端的代理。 我认为它可以解决您的问题，但是我不知道它将如何处理websocket通信。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

我认为您需要从弹簧和角度广泛使用websocket的人那里得到更详尽的答案。

Answer 2

您要更改代理配置文件以指向正确的IP地址而不是本地主机，所以：

package.json

我不能说我不了解WebSocket实现中的STOMP而发生了WebSocket错误。