Angular 应用程序无法连接到 NodeJS/SocketIO 后端 cors 问题？

Question

我正在准备在我的 Angular 应用程序中使用 SocketIoModule 将我的 Angular 应用程序与我的 NodejS 后端连接，但我在浏览器中遇到错误

我的后台

const express = require('express');
var cors = require('cors')
const app = express();

app.use(cors({
    origin: ':'
}))

const http = require('http');
const server = http.Server(app);

const socketIO = require('socket.io');
const io = socketIO(server);

const port = process.env.PORT || 3000;


server.listen(port, () => {
    console.log(`started on port: ${port}`);
});

io.on('connection', (socket) => {
    console.log('user connected');
    
});
io.on('new-message', (message) => {
    io.emit(message);
}); 

模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SocketIoModule.forRoot(config),
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这会触发服务器上的“连接”事件，但会在浏览器控制台中引发错误

Answer 1

我将按照承诺附上一些工作代码，但我可能刚刚注意到一些事情......错误消息提到端口 3000 和端口 4200，看起来你的套接字在端口 3000 上打开，所以我想知道是否你能查到 4200 是从哪里来的吗？

---

回复您的评论： 我相信 Socket.IO 用于连接 Client Server。所以你的配置可能有问题。您确定要使用不同的端口吗？正如您提到的，您想要 2 个服务器，但我猜您真的想要 1 个端口和 1 个服务器，运行 1 个具有客户端 服务器通信的应用程序？
无论如何，如果我不在那儿，可能只是因为端口/服务器不同，CORS 错误在这里实际上是有效的，您必须弄清楚如何将 CORS 标头添加到您的 Web 服务器：

例子：

xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

将允许与任何客户进行通信

---

如果您想尝试比较代码，这是我建立的聊天室的一个较旧的工作示例。

app.js

var app = require('express')();
var http = require('http').Server(app);
var socket = require('socket.io')(http);

app.get('*', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

socket.on('connection', function (io) {
    io.on('ioChatMessage', function (msg) {
        socket.emit('ioChatMessage', msg);
    });
});

http.listen(process.env.PORT);

index.html

<ul id="Messages"></ul>
<form action="">
    <input id="Message" autocomplete="off" />
    <input type="button" id="Send" value="Send" />
</form>


<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    $.getScript('socket.io/socket.io.js', function () {
        initSocket();
    });

    var initSocket = function () {
        var socket = io();

        $('#Send').click(function () {
            var userNameTag = $('#UserNameTag');
            var nameTag = userNameTag.html();
            if (nameTag) {
                socket.emit('ioChatMessage', { text: nameTag + ':  ' + $('#Message').val(), style: userNameTag[0].style });
            } else {
                socket.emit('ioChatMessage', { text: $('#Message').val() });
            }

            $('#Message').val('');
            return false;
        });

        socket.on('ioChatMessage', function (msg) {
            $('#Messages').append($('<li>').text(msg.text).css(msg.style));
        });

        window.onbeforeunload = function () {
            socket.disconnect();
        };
    };
</script>
 

Answer 2

解决办法：

我创建服务器

index.js

var express = require('express');
var socket = require('socket.io');
var port=3000;
// App setup
var app = express();
var server = app.listen(port, function(){
    console.log(`
    -------------Resume-------------------
    status:     listening
    port:       ${port}
    url:        http://localhost:${port}
    --------------------------------------`);
});

// Socket setup
var io = socket(server);

// Listen for new connection and print a message in console 
io.on('connection', (socket) => {

    console.log(`
    ------------New connection---------------------
    
    Connection ID:   ${socket.id}
    IP:              ${socket.handshake.address}
    Time:            ${socket.handshake.time}
    ----------------------------------------------`)

    // Listening for chat event
    socket.on('chat', function(data){
        
        io.sockets.emit('chat', data);
    });

    // Listening for typing event
    socket.on('typing', function(data){
        console.log('typing event');

        io.sockets.emit('typing', data);
    });

});

然后将 socket.io-client 和 **@types/socket.io-client ** 导入到我的 Angular 项目中 并创建一个 WebSocketService 来处理发射和监听器 并将服务添加到提供程序，并将 HttpClientModule 添加到 modules.ts 中的导入。

webSocketService.service.ts

import { Injectable } from "@angular/core";
import * as io from 'socket.io-client';
import { Observable } from "rxjs";

@Injectable()
export class WebSocketService {
    socket: SocketIOClient.Socket;

    constructor() {
        this.socket = io.connect('http://localhost:3000');
    }

    listen(eventname: string) : Observable<any> {
        return new Observable((subscriber) => {
            this.socket.on(eventname, (data) => {
                subscriber.next(data);
            })
        })
    }

    emit(eventname: string, data: any) {
        this.socket.emit(eventname, data);
    }
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { WebSocketService } from './web-socket.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [WebSocketService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

如果您使用的是 socket.io v.3.x，请查看此页面：https://socket.io/docs/v3/migrating-from-2-x-to-3-0/index.html，尤其是关于 CORS 处理的部分。

您应该像这样实现您的应用程序：

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "https://example.com",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

还要确保您的 socket.io 版本匹配。