Блог

Вы, вероятно, думаете, что этот вопрос можно пометить как дубликат, но я искал везде и не нашел того, что ищу.

Я разрабатываю приложение ionic-react и использую сервер nodejs в качестве серверной части. Я подключаю своего клиента к серверу через websocket. Я использую библиотеку SocketIO-client на стороне клиента и встроенный модуль https и express framework на стороне сервера.

Все работает нормально, когда я использую соединение http или ws. Теперь мое приложение готово к производству, и я переключаюсь на https или wss в моем случае, потому что я хочу использовать websocket. Я делаю это впервые, поэтому это меня очень смущает.

Вот мой клиентский код (я изменил secure на true, поскольку прочитал, что я должен это сделать, если я планирую использовать https / ssl):

 import socketIOClient from 'socket.io-client';

const socket = socketIOClient("wss://localhost:8000", { secure: true });
  

Вот мой серверный код:

 var express = require('express');
var https = require('https');
var http = require('http');
var fs = require('fs');
var ws = require('ws').Server;
// This line is from the Node.js HTTPS documentation.
var options = {
  key: fs.readFileSync('key.pem').toString(),
  cert: fs.readFileSync('cert.pem').toString(),

};

var app = express();
var httpsServer = https.createServer(options, app);

var wss = new ws({
    server: httpsServer
});


wss.on("connection", (socket) => {
    console.log("client connected");

    socket.on("message", (msg) => {
        console.log("received: ", msg);
    });

    socket.on("disconnection", () => {
        console.log("client disconnected");
    })
});
httpsServer.listen(8000, () => {
    console.log("server running on 8000");
})
  

Я сгенерировал ssl-сертификат, следуя этому примеру.
Мой код отлично работает, когда я использую http, но внезапно я получаю сообщение об ошибке при использовании https / wss, хотя я добавил SSL-сертификат.

Интересно, что ошибка, которую я получаю в chrome, отличается от ошибки в Firefox. Вот ошибка, которую я получаю в chrome (она даже выглядит как две независимые ошибки):

     Access to XMLHttpRequest at 'https://localhost:8000/socket.io/?EIO=3amp;transport=pollingamp;t=NFuRgsF' from origin 'http://localhost:8100' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
    polling-xhr.js:268 

GET https://localhost:8000/socket.io/?EIO=3amp;transport=pollingamp;t=NFuRgsF net::ERR_FAILED 
  

Вот ошибка, которую я получаю в Firefox:

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8000/socket.io/?EIO=3amp;transport=pollingamp;t=NFuR-Im. (Reason: CORS request did not succeed).
  

Я пытался отключить все мои плагины borwser (например, adblock), но это не сработало. Далее я попытался настроить заголовок и cors (я нашел это в Интернете, читая об ошибке cors):

 app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    
    next();
  });
  

Однако добавление этого кода ничего не изменило, и ошибка по-прежнему появляется. Я не знаю, что мне с этим делать. Возможно, это глупый вопрос, но нужно ли мне каким-то образом предоставлять сертификат также на стороне клиента? это проблема на стороне клиента или сервера?