Question

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

// 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

当我重新启动服务器和角度应用程序时，打开新窗口我在服务器的控制台上没有消息告诉我用户已连接，因为知道角度正在调用服务器api < / p>

我不知道问题在哪里

更新

我在客户端添加了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);
  }*/

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

更新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 'localhost:8081'

Answer 1

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

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

为什么这是一个问题？ From the docs：

在响应凭证请求时，服务器必须在Access-Control-Allow-Origin标头的值中指定原点，而不是指定＆＃34; *＆＃34;通配符。

这是relevant StackOverflow answer：

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

在NodeJs服务器上安装Socket.IO

1 个答案: