无法与 socket.io 建立连接 - Angular 7答案

【问题标题】：Cannot establish connection with socket.io - Angular 7无法与 socket.io 建立连接 - Angular 7
【发布时间】：2019-04-16 13:47:10
【问题描述】：

我第一次尝试在我的 Angular 应用程序中与 Web 套接字建立连接。但它不起作用并替换了 url 路径

我的套接字服务

 public initSocket(): void {
        this.socket = socketIo('http://11.11.11.111/demo-api/status/');
    }

错误

Access to XMLHttpRequest at 'http://11.11.11.111/?EIO=3&transport=polling&t=Meccctccu' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【问题讨论】：

你是否使用节点作为后端？
@Sachin Shah No
我会推荐使用 HTML5 - WebSockets 而不是 socket.io。在我的项目中使用 socket.io 时我也遇到了很多问题，然后我发现了两个非常有用的链接 ref1# medium.com/@lwojciechowski/…, ref2# stackoverflow.com/questions/43328451/… HTML5 - WebSockets 在我的项目中就像一个魅力

标签： angular

【解决方案1】：

您需要在后端启用 cors。

您应该 read more 了解 cors 的含义并在后端启用它

【讨论】：

它与 CORS 无关

【解决方案2】：

您看到的错误是不言自明的。如果您正在访问的当前域不存在于允许的来源（Access-Control-Allow-Origin 标头）中，则您无法通过 ajax 或使用 Web 套接字连接到另一个域。

Mozilla Developer website 上有一个很好的解释 CORS 是什么。

要解决此问题，您需要在您尝试访问的后端添加一些标头：

Access-Control-Allow-Origin: *（这意味着允许 ANY 来源，在生产中不是一个好主意！）
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS, any other you might need
Access-Control-Allow-Headers: Accepts, Authorization, Access-Control-Allow-Headers, Access-Control-Request-Headers, Access-Control-Request-Method, DNT, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Content-Range,Range

如果您将 Angular 应用程序作为 Electron 应用程序运行（例如），您可以禁用 CORS 检查：Electron (chromium) disable web security

const win = new BrowserWindow({ webPreferences: { webSecurity: false } });

【讨论】：