Socket.io + Node.js跨源请求被阻止

Question

我正在使用node和socket.io来编写聊天应用程序.它在Chrome上工作正常但mozilla在启用跨源请求时出错.

跨源请求已阻止:同源策略不允许在http://waleedahmad.kd.io:3000/socket.io/?EIO=2&transport=polling&t=1401964309289-2&sid=1OyDavRDf4WErI-VAAAI上读取远程资源.这可以通过将资源移动到同一域或启用CORS来解决.

这是启动节点服务器的代码.

var express = require('express'),
    app = express(), 
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    path = require('path');
server.listen(3000);

app.get('/', function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

在客户端.

var socket = io.connect('//waleedahmad.kd.io:3000/');

HTML页面上的脚本标记.

<script type="text/javascript" src="//waleedahmad.kd.io:3000/socket.io/socket.io.js"></script>

我也在app根目录中使用.htaccess文件.(waleedahmad.kd.io/node).

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Answer 1

简单的服务器端修复

var io = require('socket.io')(server, { origins: '*:*'});

要么

io.set('origins', '*:*');

要么

io.origins('*:*') // for latest version

* 独自不起作用,让我失去了兔子洞.

Answer 2

您可以尝试origins在服务器端设置选项以允许跨源请求:

io.set('origins', 'http://yourdomain.com:80');

这http://yourdomain.com:80是您要允许来自的原点.

您可以在此处阅读有关origins格式的更多信

Answer 3

对于在这里寻找新的 Socket.io (3.x) 的人来说，迁移文档非常有用。

特别是这个片段：

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

Answer 4

我正在使用v2.1.0，以上答案均不适合我。虽然这样做：

import express from "express";
import http from "http";

const app = express();
const server = http.createServer(app);

const sio = 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();
    }
});

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

server.listen(3000);

Answer 5

客户：

const socket = io('https://sms-server.cedrick1227.repl.co/', { });

服务器：

const io = new socket.Server(server, { cors: { origin: '*' } });

它对我来说就像一种魅力。

Answer 6

In my case, I'm using an HTTP server and socket.io

Error:

var http = require('http').Server(app);
var io = require('socket.io')(http);

Solution:

var http = require('http').Server(app);
var io = require('socket.io')(http,  { cors: { origin: '*' } });

Answer 7

我在上面尝试过，对我没有任何帮助。以下代码来自socket.io文档，并且可以正常工作。

io.origins((origin, callback) => {
  if (origin !== 'https://foo.example.com') {
      return callback('origin not allowed', false);
  }
  callback(null, true);
});

Answer 8

如果你得到io.set not a function或io.origins not a function，你可以尝试这样的表示法：

import express from 'express';
import { Server } from 'socket.io';
const app = express();
const server = app.listen(3000);
const io = new Server(server, { cors: { origin: '*' } });

Answer 9

我只想说，在尝试了很多事情之后，解决我的 CORS 问题的方法只是使用旧版本的 socket.io（2.2.0 版）。我的 package.json 文件现在看起来像这样：

{
  "name": "current-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "devStart": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "socket.io": "^2.2.0"
  },
  "devDependencies": {
    "nodemon": "^1.19.0"
  }
}

如果您执行npm install此操作，您可能会发现在尝试使用 socket.io 时 CORS 问题消失了。至少它对我有用。

Answer 10

我也一直在努力解决这个问题，直到我看到文档说：“您不能将 'withCredentials' 设置为 true with origin: *，您需要使用特定的 origin:”。所以我的代码看起来像这样，希望有用：

网络客户端

const { io } = require("socket.io-client");
const socket = io("localhost:3000", {
  extraHeaders: {
    "my-custom-header": "abcd"
  }
});

服务器

var express = require('express');
const app = express();
const http = require('http');
const httpServer = http.createServer(app);
const io = require("socket.io")(httpServer, {
  cors: {
    origin: '*',
    methods: ["GET", "POST"],
  }
});