如何使用spring boot后端使角度应用程序仅接收来自局域网的请求？

Posted 2023-02-27

【中文标题】如何使用spring boot后端使角度应用程序仅接收来自局域网的请求？

【英文标题】：how to make angular app using spring boot backend receive only requests from local area network?

【发布时间】：2019-06-26 17:06:59

【问题描述】：

我正在开发一个带有 jwt 身份验证和 Spring Boot 后端的 Angular 应用程序。 目前，我希望我的应用程序仅适用于连接到局域网的所有 PC。

对于 angular，我尝试了 ng serve --host 0.0.0.0 并且我的应用程序可用于网络上的所有 pc 电脑，其 ip 为应用程序服务，随后是：4200。

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

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

在 intellij 中，我没有收到任何消息，表明没有请求到达 spring。

在运行 angular 和 spring boot 的 PC 上，我可以使用相同的凭据成功进行身份验证，我没有收到任何错误。

这是我在 Spring Boot 中的 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 时，我的 angular 应用程序被渲染，我尝试身份验证，在 chrome 控制台中“连接被拒绝”，当尝试 pc_ip:8080 时，我在 spring 中收到请求，但我的异常处理程序会处理它。

我在想，我必须在春季进行额外配置吗？我错过了什么？

亲切的问候，

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

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

EDIT3：我在 spring security 中进行了编辑以允许所有应用程序。在另一台 PC 上，我现在可以浏览我的应用程序，键入 pc_ip:8080/ 并添加我在控制器中定义的任何 url。此外，在 pc_ip:4200 我的角度应用程序存在。我怎样才能重新设置我的设置，以便在不同的电脑上只有一个 ip 运行我的应用程序？

EDIT4：感谢 georgeB，我设法解决了几乎所有的问题，但 websocket 仍然无法在网络中的另一台 PC 上运行。我附上了一个打印屏幕来显示错误。我不明白，为什么在运行angular和spring的PC上webbsocket没有问题，而在另一台PC上所有身份验证，请求都可以，但是websocket不行。

EDIT5：对于 stomp 实现，我使用 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) => 
 );

【参考方案1】：

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

  "/api": 
    "target": "http://pc_ip:8080",
    "secure": false
  

如果不查看您的 STOMP over WebSocket 实现，我不能说我知道 WebSocket 错误是怎么回事。

【讨论】：

谢谢。我添加了一个编辑 5，对 websocket 进行了说明。

对于我试过的 websocket，"/ws": "target": "ws://192.168.0.106:8080/api", "secure": false 和 brokerURL: 'ws/ socket'，我得到类似构造 Websocket 失败，/api/socket 无效

【参考方案2】：

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

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

我认为您需要从广泛使用带有 spring 和 angular 的 websocket 的人那里得到更详细的答案。

【讨论】：

你是对的。你的回答解决了我的问题，除了 websocket。我在 EDIT4 附加了一个打印屏幕：解释错误。