Angular+PHP部署Hostinger遇Socket.io跨域(CORS)及404错误求助

一、先解决Socket.io 404错误（核心根源） #

你的404错误说明客户端请求的/socket.io端点在服务器上不存在——你错误地把它指向了普通PHP文件conteo.php，但Socket.io需要专门的服务端实现，普通PHP无法处理Socket.io的长连接请求。

修复步骤： #

1. 部署Socket.io服务端

   • 若使用Node.js版Socket.io：在Hostinger控制面板启用Node.js环境，创建服务端文件（如server.js）：

     const express = require('express');
     const http = require('http');
     const { Server } = require('socket.io');
     const cors = require('cors');
     
     const app = express();
     app.use(cors({
       origin: "*", // 开发阶段允许所有，上线后替换为你的Angular生产域名
       credentials: true
     }));
     
     const server = http.createServer(app);
     const io = new Server(server, {
       cors: {
         origin: "*",
         methods: ["GET", "POST"]
       }
     });
     
     io.on('connection', (socket) => {
       console.log('用户已连接');
       socket.on('disconnect', () => {
         console.log('用户已断开');
       });
     });
     
     server.listen(3000, () => {
       console.log('服务运行在3000端口');
     });
     

   • 若坚持用PHP实现：使用Ratchet（PHP WebSocket库）兼容Socket.io，或直接改用原生WebSocket，避免依赖Socket.io的polling模式。

2. 修正Angular代理配置
   把proxy.conf.json里的/socket.io目标指向Socket.io服务端地址，而非PHP文件：

   {
     "/socket.io": {
       "target": "https://你的Hostinger域名:3000",
       "secure": true,
       "changeOrigin": true,
       "ws": true // 启用WebSocket代理支持
     },
     "/api": {
       "target": "https://你的Hostinger域名/Inventario/conteo.php",
       "secure": true
     }
   }
   

   启动Angular时需指定代理配置：ng serve --proxy-config proxy.conf.json

二、修复CORS配置冲突与生效问题 #

你的CORS配置存在重复（.htaccess和PHP均设置），且Hostinger的环境可能导致头部未正确返回。

修复步骤： #

1. 清理重复配置并优化.htaccess

   • 删除PHP文件中所有CORS相关header()代码，避免与.htaccess冲突。
   • 修改.htaccess，针对OPTIONS预检请求做专门处理：

     RewriteEngine On
     RewriteCond %{SERVER_PORT} !=443
     RewriteRule ^(.*)$ https://你的Hostinger域名/$1 [R=301,L]
     
     <IfModule mod_headers.c>
       # 处理浏览器预检OPTIONS请求
       RewriteCond %{REQUEST_METHOD} OPTIONS
       RewriteRule ^(.*)$ $1 [R=200,L]
     
       Header always set Access-Control-Allow-Origin "*"
       Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, PATCH, OPTIONS"
       Header always set Access-Control-Max-Age "1000"
       Header always set Access-Control-Allow-Headers "Origin, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key, X-Response-Time, X-PINGOTHER, X-CSRF-Token, Authorization"
       Header always set Access-Control-Expose-Headers "*"
     </IfModule>
     

   注意：替换你的Hostinger域名为实际地址，删除多余的转义符\"。

2. 验证Hostinger模块启用状态
   登录Hostinger控制面板，进入Advanced > Apache Configuration，确认mod_headers模块已启用（未启用则勾选保存）。

3. 开发阶段临时测试方案
   本地开发时可使用Chrome插件（如Allow CORS: Access-Control-Allow-Origin）临时绕过CORS，但上线前必须依赖服务器端配置。

三、验证与测试 #

1. 重启Node.js服务（若用Node.js版Socket.io）和Apache服务（Hostinger控制面板可操作）。
2. 用Postman请求https://你的Hostinger域名/socket.io/?EIO=4&transport=polling，确认返回200状态码且响应头包含Access-Control-Allow-Origin。
3. 启动Angular项目，测试Socket连接是否正常。

内容的提问来源于stack exchange，提问作者Jesiel Neftali Ramírez Juárez