在NodeJs服务器上安装Socket.IO

Question

我会使用Socket.IO。 我已经阅读了官方文档并试图做同样的事情，所以我创建了服务器：

// server.js

// BASE SETUP
// =============================================================================

// call the packages we need
var express = require("express"); // call express
var app = express();
var bodyParser = require("body-parser");

// define our app using express
var routerProj = require("./routes/ajoutProj");

var mongoose = require("mongoose");

mongoose.Promise = global.Promise;

mongoose.connect("mongodb://localhost:27017", {
  useMongoClient: true

  /* other options */
}); // connect to our database

mongoose.connection.on("error", function(error) {
  console.log("error", error);
});
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT ,DELETE");

  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use("/api/proj", routerProj);

app.get("/", function(req, res) {
  res.sendFile(__dirname + "../src/index.html");
});
// Chargement de socket.io

// Quand un client se connecte, on le note dans la console
io.sockets.on("connection", function(socket) {
  console.log("User is coonected!");
});
var port = process.env.PORT || 8081; // set our port

// START THE SERVER
// =============================================================================
var server = app.listen(port);
var io = require("socket.io").listen(server);

我的角度index.htlm文件相对于server.js在此路径中：../src/app/index.html

当我重新启动服务器和angular应用程序时，然后打开新窗口，服务器控制台上没有消息告诉我用户已连接，但知道angular正在调用服务器api

我不知道问题出在哪里

更新

我在客户端添加了socket.IO

import { Injectable } from "@angular/core";
import { NouveauProjet } from "./models/nouveau-projet";
import { HttpClient, HttpResponse } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import * as io from "socket.io-client";

@Injectable()
export class AjoutprojService {
  apiURL = "http://127.0.0.1:8080/api/proj/projets";
  private socket = io("http://localhost:8081");

  constructor(private http: HttpClient) {}

  getAllProj(): Observable<NouveauProjet[]> {
    return this.http.get<NouveauProjet[]>(
      "http://127.0.0.1:8081/api/proj/projets"
    );
  }
  getProj(id): Observable<NouveauProjet[]> {
    return this.http.get<NouveauProjet[]>(
      "http://127.0.0.1:8081/api/proj/nouvProjs/${id}"
    );
  }
  addProj(nouveauProjet: NouveauProjet): Observable<any> {
    return this.http.post<NouveauProjet[]>(
      "http://127.0.0.1:8081/api/proj/projets",
      nouveauProjet
    );
  }
}
/*  private handleError ( response: HttpResponse): Observable<any> {
    let errorMessage= `${response.status} - ${response.statusText}`;
    return Observable.throw(errorMessage);
  }*/

重新启动服务器，客户端，没有结果

添加socket.on('event', function(evt){ console.log(evt); });之后的更新2 socket.on('event', function(evt){ console.log(evt); }); 我得到那些错误：

Failed to load http://localhost:8081/socket.io/?EIO=3&transport=polling&t=M2tXQXh: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

GET http://localhost:8081/socket.io/?EIO=3&transport=polling&t=M2tXQXh 404 (Not Found)

如果我设置res.header("Access-Control-Allow-Origin", "*"); 要res.header("Access-Control-Allow-Origin", "http://localhost:4200"); 我得到这个错误

Failed to load http://localhost:8081/socket.io/?EIO=3&transport=polling&t=M2uichH: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

我发现错误有所不同。 此处The value of the 'Access-Control-Allow-Credentials' header in the response is ''当我放置localhost：8081时： The value of the 'Access-Control-Allow-Credentials' header in the response is '' The value of the 'Access-Control-Allow-Credentials' header in the response is 'localhost:8081'

Answer 1

基于该错误，我怀疑问题是您在服务器的CORS响应标头中使用通配符：

res.header("Access-Control-Allow-Origin", "*");

为什么这是个问题？ 从文档 ：

当响应凭证请求时，服务器必须在Access-Control-Allow-Origin标头的值中指定一个来源，而不是指定“ *”通配符。

这是一个相关的StackOverflow答案 ：

这是安全的一部分，您不能这样做。 如果要允许凭据，则您的Access-Control-Allow-Origin不得使用*。 您将必须指定确切的协议+域+端口。