CORS、Laravel Valet 和 Socket.io

Posted

技术标签:

【中文标题】CORS、Laravel Valet 和 Socket.io【英文标题】:CORS, Laravel Valet, and Socket.io 【发布时间】:2021-02-23 13:52:03 【问题描述】:

感觉这一切都比应有的要难。我正在为客户开发一个应用程序,并且正在竭尽全力试图让这个东西在本地运行。所以,我正在使用 Laravel(通过我的 mac 上的 Valet 提供服务)并且正在编写一个 Socket.io 服务器来处理不同的仪表板事件。 Socket.io 运行在 https 配置中,就像它在生产中一样,我让它在端口 3001 上运行。我已经通过 https 提供内容,解决了那里的所有配置问题。但是,现在每当我尝试连接时,我都无法停止收到 CORS 错误。

这是我得到的错误:

CORS 政策已阻止从源“https://ags.test”访问“https://ags.test:3001/socket.io/?EIO=3&transport=polling&t=1605106550351-47”处的 XMLHttpRequest : 请求的资源上不存在“Access-Control-Allow-Origin”标头。

我对此进行了相当多的测试,发现如果我向 express 服务器的根 (/) 发出 GET 请求,它可以正常工作并且没有 CORS 错误。但是,在上述错误中发布的 url 上的轮询仍然提供相同的 CORS 错误。

如果现在还不是很明显,那么我对节点生态系统还很陌生。所以我所关注的是 CORS 从调用“https://ags.test:3001”到“https://ags.test:3001/socket.io/*”时发生了什么。还是 express 根本没有处理 socket.io 的 CORS?

我在其他 *** 答案中多次看到的内容类似于(来自服务器)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);

我还对我在代客中的 laravel 站点配置进行了调整,如此处所示 https://gist.github.com/poul-kg/b669a76fc27afcc31012aa0b0e34f738,但直接应用于 ~/.config/valet/nginx/ags.test 中的站点特定配置并重新启动。

如您所见,我已经尝试了很多不同的方法,并且正处于试图让这些服务器进行通信的“把所有东西都扔到墙上,看看有什么问题”阶段。有什么建议吗?

【问题讨论】:

【参考方案1】:

好吧,我花了太长时间才弄清楚我错过了什么。旧的 *** 答案显示 Socket.io v3 不再支持的配置方法。

这是截至发布之日我为最新版本的 Socket.io 配置此功能所缺少的内容。

const server = https.createServer(options, app);
const io = require('socket.io')(server, 
    cors: 
        origin: 'https://ags.test'
    
);

【讨论】:

以上是关于CORS、Laravel Valet 和 Socket.io的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Sanctum:被带有 Nuxt Auth 模块的 CORS 策略阻止

sh 安装并激活WooCommerce和Storefront的新WordPress站点。您必须安装Laravel Valet或Valet +

升级Laravel Valet 版本

在Mac开发环境Laravel Valet中配置运行Flarum论坛系统的方法详解

Laravel Dusk 忽略 .env.dusk 和 .env.dusk.local(使用 Valet 和 Laravel 5.5)

Laravel Valet 站点连接在端口 80 上被拒绝