已解决 - 从 Java Spring 写入 Angular 9 套接字 - 被 CORS 策略阻止答案

【问题标题】：SOLVED - Write to Angular 9 Socket from Java Spring - Blocked by CORS Policy已解决 - 从 Java Spring 写入 Angular 9 套接字 - 被 CORS 策略阻止
【发布时间】：2020-09-03 10:33:02
【问题描述】：

我在尝试在 Angular 9 应用程序中打开 SockJS 套接字并使用 SimpMessageTemplate 从 Spring 后端写入此套接字时遇到问题。此任务的主要目标是实时接收和显示传入数据，无需轮询。

我的原始实现基于mouadelfakir 完成的现有repository，但该实现使用的是旧版本的软件（Angular ~1 和 Spring Boot ~1.5）。更新到较新版本时，Angular 9 更新没有改变应用程序的工作方式，但升级到 Spring Boot 2.2.6 会破坏实现。

当 Angular 应用程序尝试连接后端 Spring 应用程序时，控制台输出以下两个错误：

- Access to XMLHttpRequest at 'http://localhost:8080/websocket-backend/socket/info?t=1589733936852' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- GET http://localhost:8080/websocket-backend/socket/info?t=1589733936852 net::ERR_FAILED

在写这篇文章的时候，我已经尝试了很多我在网上看到的推荐的其他补救措施，例如创建一个运行 Angular 应用程序的代理或实现一个过滤器来添加跨域请求- 春季的政策，但没有任何效果。这些帖子中的大多数都较旧，我认为由于更新了软件，它们可能不再有效。

这是我使用的示例存储库的current fork，其中包含我正在尝试使用的软件升级。

编辑：感谢您对此的反馈，我能够解决问题。这是由于升级到较新版本的 Spring 引起的，但实际上是由于我在 application.properties 中使用的原始开发密钥弃用了。如果有人需要，我的current fork 上有更新的代码。

【问题讨论】：

尝试启用对 localhost 域的访问。 stackoverflow.com/questions/54327963/…

标签： java angular spring spring-boot sockjs

【解决方案1】：

您使用的示例是 2 岁。即使是现在，并非所有浏览器都具有内置的 CORS 支持，因此问题就来了。

所以你的应用程序永远不会真正连接到套接字。您的浏览器首先向后端发送请求，询问套接字信息并且该请求失败，因为您的后端没有指定 CORS 标头。或者更具体地说，请求成功，但浏览器拒绝处理响应（即使有一些合法的 JS 代码来处理响应），因为 CORS 标头与您的应用程序表示的数据不匹配。

在高层次上，您可能希望您的后端返回以下标头

Access-Control-Allow-Origin - 用户界面作为主机的 DNS（如 http://localhost:8080）或 *。此标头只能有 1 个值。这不是一个列表。
Access-Control-Allow-Methods - 允许浏览器创建的 HTTP 方法的逗号分隔列表，因此可以是 GET, POST, PUT, DELETE, OPTIONS 或只是 *
Access-Control-Allow-Headers - 允许浏览器发送到后端的所有标头的逗号分隔列表，例如 authorization, user-agent, host, accept, content-type... 或 *。

这是一个很好的设置示例：https://docs.spring.io/spring/docs/5.0.0.BUILD-SNAPSHOT/spring-framework-reference/html/websocket.html#websocket-server-allowed-origins

@Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler").setAllowedOrigins("http://test.com");
    }

基本上，您需要使用您的域（又名。http://localhost:您的端口）或* 调用setAlowedOrigins。我想设置其他 CORS 标头也将有利于完整的浏览器支持

【讨论】：