angularjs - 为 Socket.IO 设置 COR header

Question

我尝试通过 Apache 代理使用 socket.io 服务，但我不断收到此错误:

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'. Origin 'http://localhost:18996' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这是我的 apache 配置

<VirtualHost *:443>
    ServerName myserver.com

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Max-Age "1000"
    Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, cl$

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    DocumentRoot /var/www/api
    SSLEngine on
    SSLCertificateFile /etc/ssl/MYSSL
    SSLCertificateKeyFile /etc/ssl/MYSSL
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full
    <Proxy *>
        Require all granted
    </Proxy>
    <Location /api1>
        ProxyPass http://127.0.0.1:8005
        ProxyPassReverse http://127.0.0.1:8005
    </Location>
    <Location /api2>
        ProxyPass http://127.0.0.1:9000
        ProxyPassReverse http://127.0.0.1:9000
    </Location>
    <Location /socketioservice>
        ProxyPass http://127.0.0.1:9090
        ProxyPassReverse http://127.0.0.1:9090
    </Location>
</VirtualHost>

这是我的 Node JS 代码:

const express    = require('express'),
      app        = express(),
      bodyParser = require('body-parser'),
      server     = require('http').createServer(app),
      io         = require('socket.io')(server);

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

io.on('connection', user => {
    //Socket.io Functions
});

server.listen(8000, () => console.log('Server Running'));

如您所见，我在同一个盒子上运行了其他 NodeJS 服务，这些服务只是 Express JS API，并且它们工作得很好(使用与您在 socket.io 代码中看到的相同的 cors 配置)。

我尝试像这样更改 cors 设置:

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json()); 
app.use(cors({ origin: '*' }));

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', false);
    next();
});

const server = app.listen(cross.NormalizePort(process.env.PORT || 9090));
const io = require('socket.io').listen(server, {
    log: false,
    agent: false,
    origins: '*:*',
    transports: ['websocket', 'htmlfile', 'xhr-polling', 'jsonp-polling', 'polling']
});

但这给了我完全相同的结果。我尝试在完全不使用 cors 的情况下使用它，但得到了相同的错误。

我正在 AngularJS 应用程序中使用它，其工厂如下所示:

.factory('Links', ['$rootScope', function ($rootScope) {
    let socket = io.connect('https://myurl/socketioservice', { secure: true });
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function (eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
}])

我已经验证了 socket.io 服务确实可以通过在本地运行它来工作，我可以使用 http://localhost:8000 很好地连接到它。当我将其部署到生产环境时，我可以像这样使用它:http://prodipaddress:8000 并且效果也很好。

但是，我需要它能够通过 Apache 代理运行，否则由于防火墙规则，将无法从我的网络外部访问它。

如何配置 cors 以允许我连接到我的 socket.io 服务？

Answer 1

您正在使用凭据模式(意味着您正在从 Angular 应用程序发送一些身份验证 cookie)，并且对于 CORS 规范，您不能在此模式下使用通配符 *。

您应该更改 Access-Control-Allow-Origin header 以匹配生成请求的特定主机

您可以更改此行:

res.header('Access-Control-Allow-Origin', '*');

到

res.header('Access-Control-Allow-Origin', 'http://localhost:18996');

但更通用的是:

res.setHeader('Access-Control-Allow-Origin', req.header('origin') 
|| req.header('x-forwarded-host') || req.header('referer') || req.header('host'));