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

我尝试在我的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);
}); 

模块1.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 { }

---

这将触发服务器上的“连接”事件，但在浏览器控制台中安装了错误。我将按照承诺附加一些工作代码，但我可能刚刚注意到了一些。。。错误消息提到了端口3000和端口4200，看起来您的套接字在端口3000上是打开的，所以我想知道您是否可以找到4200的来源

---

回应你的评论： 我相信Socket.IO是用来连接客户机和服务器的。因此，您的配置可能存在问题。您确定要使用不同的端口吗？正如您提到的，您需要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>
 

$.getScript（'socket.io/socket.io.js'，函数（）{
initSocket（）；
});
var initSocket=函数（）{
var socket=io（）；
$（“#发送”）。单击（函数（）{
var userNameTag=$（'#userNameTag'）；
var nameTag=userNameTag.html（）；
如果（姓名标签）{
emit（'ioChatMessage'，{text:nameTag+'：'+$（'#Message'）.val（），style:userNameTag[0].style}）；
}否则{
emit（'ioChatMessage'，{text:$（'#Message'）.val（）}）；
}
$（'#Message'）.val（''）；
返回false；
});
socket.on（'ioChatMessage'，函数（msg）{
$（'#Messages'）.append（$（'
'）.text（msg.text）.css（msg.style））；
});
window.onbeforeunload=函数（）{
socket.disconnect（）；
};
};

解决方案： 我创建了服务器

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**导入到我的项目中 并创建一个WebSocketService来处理发射和侦听器 并将服务添加到提供者中，将HttpClientModule添加到modules.ts中的导入中

webSocketService.service.ts

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 v.3.x，请查看以下页面：，特别是关于CORS处理的部分

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

const io=require（“socket.io”）（httpServer{
cors：{
来源：“https://example.com",
方法：[“获取”、“发布”]，
AllowedHeader:[“我的自定义头”]，
凭据：正确
}
});可能是一个愚蠢的问题，但您是否尝试过删除：app.use（cors（{origin:':':'}）），我想如果这有帮助的话，我可以从一个旧的工作示例中提取出来。无论有没有它，我都会遇到相同的错误。如果你发现它是awsome@JBoothUAok，那么它就老了，如果我没记错的话，我用socket.io和expressweb服务器将它连接起来，然后通过IISNODE将它连接到我的IIS。我不确定这是否相关，但我会发布它。我实际上注意到了其他一些东西，所以我发布了一些代码和另一个理论：）看起来可能你有两个应用程序真的在运行也许？一个开发人员web服务器和一个开发人员节点web服务器。我想你会希望节点服务器为angular应用程序服务（在现实世界中），而dev angular web服务器仅用于独立测试angular应用程序？是的@JBoothUA，我有两个独立运行的应用程序，我想实现的是让它们在不使用同一端口的情况下进行通信，假装他们在不同的服务器上，我在YouTube上看到了一些视频，一切正常，我不知道发生了什么。ClientServer抱歉，这就是我要做的：（看，我完全按照这段视频前面所说的做了，我得到了相同的结果cors block@JBoothUAi认为你需要将angular应用程序加载到一个HTML文件中。只需将通过ng build创建的js文件加载到该HTML文件中，然后将其放入HTML正文中或类似的内容。然后提供该HTML文件（和你的angular应用程序js文件）通过你的节点web服务器。这将在1个端口上提供你的angular应用程序。然后你应该能够通过web浏览器（客户端）访问该端口并执行套接字通信这将使angular dev web服务器端口从等式中解脱出来。我相信您现在正在运行两个独立的应用程序。您将希望在一个端口上运行一个应用程序（用于服务器），然后您可以使用浏览器表示客户端，但实际上仍然是一个应用程序在一个端口上运行
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 { }