CodeIgniter3整合Socket.io2.1.0遇资源加载失败问题求助

结合你的环境（Windows、Chrome、socket.io 2.1.0、CodeIgniter 3），这个加载错误大概率是路径引用错误或者跨域配置缺失导致的，以下是几个可行的解决方案：

方案1：使用绝对URL引用socket.io.js #

你遇到的核心问题之一是CodeIgniter的URL结构（localhost/ci_test/chat）会让相对路径的引用指向错误地址。比如你如果写了<script src="/socket.io/socket.io.js"></script>，浏览器会尝试请求localhost/ci_test/socket.io/socket.io.js，而不是正确的localhost:3000/socket.io/socket.io.js。

解决办法很直接，在你的CI视图文件里，直接用完整的绝对URL引用：

<script src="http://localhost:3000/socket.io/socket.io.js"></script>

如果不想写死域名和端口，可以用服务器变量动态拼接，适配不同环境：

<script src="http://<?= $_SERVER['HTTP_HOST'] ?>:3000/socket.io/socket.io.js"></script>

方案2：配置反向代理（适合生产环境） #

如果觉得前端直接访问3000端口不够优雅，或者后续部署到生产环境需要统一端口，可以用Apache/Nginx做反向代理，把CI项目下的/socket.io路径转发到socket.io服务器。

Apache配置示例 #

在你的CI项目根目录的.htaccess文件中添加以下规则（确保mod_proxy和mod_proxy_http模块已启用）：

RewriteEngine On
RewriteRule ^socket.io/(.*)$ http://localhost:3000/socket.io/$1 [P,L]

这样前端就可以用和CI一致的路径引用：

<script src="/ci_test/socket.io/socket.io.js"></script>

Nginx配置示例 #

在Nginx的站点配置中添加以下location块：

location /ci_test/socket.io {
    proxy_pass http://localhost:3000/socket.io;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

方案3：检查并配置socket.io的跨域允许 #

虽然你能直接访问localhost:3000/socket.io/socket.io.js，但CI页面所在的localhost/ci_test和socket.io服务器的localhost:3000属于不同端口，存在跨域限制，可能导致资源加载被浏览器拦截。

针对socket.io 2.1.0，你需要在Node.js的socket.io启动代码中配置允许跨域的源：

const io = require('socket.io')(3000, {
    origins: 'http://localhost/ci_test' // 允许CI项目的域名访问
});

如果需要允许多个源，可以用逗号分隔：

origins: 'http://localhost/ci_test,http://your-production-domain.com'

快速排查步骤 #

• 打开Chrome开发者工具（F12），切换到Network标签，刷新页面，查看socket.io.js的请求URL，确认是不是指向了错误的路径；
• 如果请求URL是localhost/ci_test/socket.io/socket.io.js，说明是相对路径问题，用方案1或2解决；
• 如果请求URL正确但返回跨域错误，用方案3配置跨域允许。

内容的提问来源于stack exchange，提问作者Jake Cube