Socket.io 和節點 JS 導致 CORS 阻塞問題

Question

我一直在研究聊天功能。 有兩種客戶端，一種是我的應用程序的前端，另一種是隨機的另一個網站。 我知道有很多這樣的問題，但我嘗試了所有解決方案，但仍然出現以下錯誤：

Access to XMLHttpRequest at 'https://mydomain/socket.io/?EIO=3&transport=polling&t=NCjoM1w' from origin 'null' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header當請求的憑據模式為“包含”時，響應中的內容不能是通配符“*”。 XMLHttpRequest 發起的請求的憑證模式由 withCredentials 屬性控制。

這是我在自己前端的客戶端遇到的錯誤：

https://mydomain/socket.io/?EIO=3&transport=polling&t=NCjnJUX 404（未找到）

這就是我嘗試從客戶端連接的方式。

    var socket = io.connect("https://mydomain:443/", {secure: true, port: '443'});

這是我的 server.js 代碼

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const users = require("./routes/api/users");
const base = require("./routes/api/base");
const leads = require("./routes/api/leads");
const requests = require("./routes/api/requests");
const offApp = require("./routes/api/offApp");
const chat = require("./routes/api/chat");
const chatSocket = require("./routes/socket/chat");
const path = require("path"); // on top
const app = express();
// const client = require('socket.io').listen(4000).sockets;
const https = require('https');
const fs = require('fs');

var options = {
  pfx: fs.readFileSync('certificate.pfx'),
  passphrase: 'password'
};

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, *');
  next();
});

var server = https.createServer(options, app);
var client = require("socket.io").listen(server);
client.origins('*:*') ;
server.listen(443);

// Bodyparser middleware
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(bodyParser.json());

// DB Config
const db = require("./config/keys").mongoURI;

// Connect to MongoDB
mongoose
  .connect(
    db,
    { useNewUrlParser: true }, (err, db) => {

      if (err) {
        throw err;
      }
      console.log('MongoDB connected');
      chatSocket(db, client);
    });

// Passport middleware
app.use(passport.initialize());

// Passport config
require("./config/passport")(passport);

// Routes
app.use("/api/users", users);
app.use("/api/base", base);
app.use("/api/leads", leads);
app.use("/api/requests", requests);
app.use("/api/offapp", offApp);
app.use("/api/chat", chat);

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

app.use(express.static("client/build")); // change this if your dir structure is different
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});

app.listen(port, () => console.log(`Server up and running on port ${port} !`));

請幫我解決這個 CORS 和其他問題。 我正在使用 Azure 應用服務。 這就是為什么我不能使用除 80 和 433 以外的任何其他端口

Answer 1

// 像這樣使用 CORS- // 你需要把它用作中間件

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

Answer 2

丹麥人嘗試這個解決方案，我希望它會奏效

const client = require("socket.io")(server, {
    handlePreflightRequest: (req, res) => {
        const headers = {
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Origin": req.headers.origin, //or the specific origin you want to give access to,
            "Access-Control-Allow-Credentials": true
        };
        res.writeHead(200, headers);
        res.end();
    }
});

client.on("connection", () => {
    console.log("Connected!");
});

server.listen(443);

Answer 3

使用 npm i cors 安裝 cors package

在您的 app.js 文件中， const cors = require('cors')

app.use(cors());