CORS、Laravel 代客和 Socket.io
CORS, Laravel Valet, and Socket.io
这感觉比它应该做的要难得多。我正在为一个客户开发一个应用程序,并且在我的绳索的尽头试图在本地获得这个东西 运行。因此,我正在使用 Laravel(通过我的 mac 上的 Valet 服务)并正在编写一个 Socket.io 服务器来处理不同的仪表板事件。 Socket.io 在 https 配置中运行,就像在生产环境中一样,我在端口 3001 上得到了它 运行。我已经通过 https 提供内容,解决了那里的所有配置问题。但是,现在我无法停止在尝试连接时收到 CORS 错误。
这是我收到的错误:
Access to XMLHttpRequest at 'https://ags.test:3001/socket.io/?EIO=3&transport=polling&t=1605106550351-47' from origin 'https://ags.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我对此做了一些测试,发现如果我向 express 服务器的根 (/) 发出 GET 请求,它工作正常并且没有 CORS 错误。但是,在上述错误中发布的 url 处的轮询仍然提供相同的 CORS 错误。
如果现在还不是很明显,我对节点生态系统还很陌生。所以我所关注的是 CORS 从调用 'https://ags.test:3001' 到 'https://ags.test:3001/socket.io/*' 时发生了什么。或者 express 是否有可能根本不处理 socket.io 的 CORS?
我在其他 Whosebug 答案中多次看到的内容是(来自服务器)io.origins('*:*')
设置原始策略的内容。但是,我似乎找不到关于此的文档并调用它(或我见过的任何变体)
所以你知道我已经尝试过什么,这里是我的 Socket.io express 服务器的服务器配置:
app.use(cors());
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
// authorized headers for preflight requests
// https://developer.mozilla.org/en-US/docs/Glossary/preflight_request
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
app.options('*', (req, res) => {
// allowed XHR methods
res.header('Access-Control-Allow-Methods', 'GET, PATCH, PUT, POST, DELETE, OPTIONS');
res.send();
});
});
var options = {
key: fs.readFileSync('./ags.test.key'),
cert: fs.readFileSync('./ags.test.crt'),
origins: '*:*',
cors: true,
};
const server = https.createServer(options, app);
我还在 valet 中对我的 laravel 站点配置进行了调整,如此处所示 https://gist.github.com/poul-kg/b669a76fc27afcc31012aa0b0e34f738 但直接应用于我在 ~/.config/valet/Nginx/ags.test 的特定于站点的配置并重新启动。
如您所见,我已经尝试了很多不同的方法,并且正处于尝试让这些服务器进行通信的“将所有东西都扔到墙上,看看有什么粘住”的阶段。有什么建议吗?
好吧,我花了太长时间才弄清楚我错过了什么。旧的 Whosebug 答案显示 Socket.io v3.
中不再支持的配置方法
这是我在发布之日为最新版本 Socket.io 配置它所缺少的内容。
const server = https.createServer(options, app);
const io = require('socket.io')(server, {
cors: {
origin: 'https://ags.test'
}
});
这感觉比它应该做的要难得多。我正在为一个客户开发一个应用程序,并且在我的绳索的尽头试图在本地获得这个东西 运行。因此,我正在使用 Laravel(通过我的 mac 上的 Valet 服务)并正在编写一个 Socket.io 服务器来处理不同的仪表板事件。 Socket.io 在 https 配置中运行,就像在生产环境中一样,我在端口 3001 上得到了它 运行。我已经通过 https 提供内容,解决了那里的所有配置问题。但是,现在我无法停止在尝试连接时收到 CORS 错误。
这是我收到的错误:
Access to XMLHttpRequest at 'https://ags.test:3001/socket.io/?EIO=3&transport=polling&t=1605106550351-47' from origin 'https://ags.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我对此做了一些测试,发现如果我向 express 服务器的根 (/) 发出 GET 请求,它工作正常并且没有 CORS 错误。但是,在上述错误中发布的 url 处的轮询仍然提供相同的 CORS 错误。
如果现在还不是很明显,我对节点生态系统还很陌生。所以我所关注的是 CORS 从调用 'https://ags.test:3001' 到 'https://ags.test:3001/socket.io/*' 时发生了什么。或者 express 是否有可能根本不处理 socket.io 的 CORS?
我在其他 Whosebug 答案中多次看到的内容是(来自服务器)io.origins('*:*')
设置原始策略的内容。但是,我似乎找不到关于此的文档并调用它(或我见过的任何变体)
所以你知道我已经尝试过什么,这里是我的 Socket.io express 服务器的服务器配置:
app.use(cors());
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
// authorized headers for preflight requests
// https://developer.mozilla.org/en-US/docs/Glossary/preflight_request
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
app.options('*', (req, res) => {
// allowed XHR methods
res.header('Access-Control-Allow-Methods', 'GET, PATCH, PUT, POST, DELETE, OPTIONS');
res.send();
});
});
var options = {
key: fs.readFileSync('./ags.test.key'),
cert: fs.readFileSync('./ags.test.crt'),
origins: '*:*',
cors: true,
};
const server = https.createServer(options, app);
我还在 valet 中对我的 laravel 站点配置进行了调整,如此处所示 https://gist.github.com/poul-kg/b669a76fc27afcc31012aa0b0e34f738 但直接应用于我在 ~/.config/valet/Nginx/ags.test 的特定于站点的配置并重新启动。
如您所见,我已经尝试了很多不同的方法,并且正处于尝试让这些服务器进行通信的“将所有东西都扔到墙上,看看有什么粘住”的阶段。有什么建议吗?
好吧,我花了太长时间才弄清楚我错过了什么。旧的 Whosebug 答案显示 Socket.io v3.
中不再支持的配置方法这是我在发布之日为最新版本 Socket.io 配置它所缺少的内容。
const server = https.createServer(options, app);
const io = require('socket.io')(server, {
cors: {
origin: 'https://ags.test'
}
});