套接字 IO 错误“对 XMLHttpRequest 的访问已被 CORS 策略阻止”

Question

我的应用最近收到错误

"访问 XMLHttpRequest 在 'https://my-service-domain/socket.io/?EIO=3&transport=polling&t=M-eWtUQ' 来自原点“https://my-app-domain”已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。”

当我连接到 socket.io 时。这个问题我还没有找到解决办法，下面我会详细描述，有没有人遇到过这个错误。

服务器配置：

var express = require('express');
var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server, {log:false, origins:'*:*'});

客户端配置：

var socket = io('https://my-service-domain', {transports: ['polling']});
socket.on(channel_id, function(data){
     // some code
});

我尝试切换websocket连接选项var socket = io('https://my-service-domain', {transports: ['websocket']})，报错

"WebSocket 连接到 'wss://my-service-domain/socket.io/?EIO=3& transport = websocket' 失败：WebSocket 握手期间出错： 意外响应代码：400"

Answer 1

If you are using Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

httpServer.listen(3000);

Answer 2

它是 100% 工作的。我花了 2 个小时在里面，终于找到了答案。 只需用这个替换代码...

const express = require("express")
var app = express();
var server = app.listen(4000);
var io = require('socket.io')(server, {
    cors: {
      origin: '*',
    }
});

Answer 3

如果您使用的是 HTTPS 协议，请尝试使用以下 sn-p：

var http = require('https');

Answer 4

如果您遇到相同类型的错误，即您对请求的访问被阻止，请更改您的代码...... const socket = io('http://localhost:8000'); 对此 const socket = io('http://localhost:8000',{transports: ['websocket']});

这将使您的代码运行

Answer 5

对于多个网址：

var io = require('socket.io')(server, {
    cors: {
      origin: ['url1','url2',..]
    }
});

Answer 6

您可以尝试使用cors npm 包。使用以下命令安装CORS：

npm install cors

然后在你的应用文件的顶部，将安装好的CORS包导入为，

const cors = require('cors');

然后使用这个常量变量作为中间件，

app.use(cors());

它将处理您需要的所有 CORS 相关选项和设置。

注意：您应该在启动路由器之前使用app.use(cors()); 行。否则可能无法正常工作。

Answer 7

当我在 Heroku 上托管使用 socekt.io 的 nodejs 应用程序时，我的浏览器中出现了同样的错误。问题是我没有在 package.json 文件中添加启动脚本。所以heroku无法启动我的应用程序。当我添加启动脚本时，问题就解决了。