在浏览器控制台中。.响应中'Access-Control-Allow-Credentials'标头的值为''，该值必须为'true'

Question

CORS策略阻止了从来源“http://localhost:3000/socket.io/？eio=3&transport=polling&t=nqb0bxp”访问来自“http://localhost:8100”的XMLHttpRequest：响应中的“access-control-allog-credentials”标头的值为“，当请求的凭据模式为”include“时，该标头必须为”true“。由XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

在节点js（后端）

var express = require('express');
var app = express();
const cors = require('cors');
app.use(cors());
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

 

  
var server = require('http').createServer(app);
const io = require("socket.io")(server, {
cors: {
    origin: "http://localhost:8100",
    methods: ["GET", "POST"],
}
});


io.on('connection',function(socket){
    console.log("A user connected");

    // socket.emit('test event','my connection');

    socket.on('test event',(data)=>{
        console.log(data);
        socket.emit('test event','my connection');
    })

})

 
// console.log(app)
server.listen(3000,()=>{
    console.log("socket io server is listening on port 3000");
});

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  socket:any;
  readonly url = "ws://localhost:3000";



  constructor() {
    console.log(io,"io")
    this.socket = io.connect(this.url,{});
   }


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

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


}

Answer 1

io(3.x)迁移文档非常有用。

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