HTML5前端与Node.js后端通信可通过四种方式：一、Ajax（fetch/XMLHttpRequest）实现HTTP请求；二、WebSocket建立全双工长连接；三、配置CORS解决跨域限制；四、使用axios简化HTTP交互。
如果您在HTML5前端页面中需要与Node.js后端交换数据，则必须建立有效的通信通道。以下是实现连接的具体方法：
一、使用Ajax发送HTTP请求
Ajax允许HTML5页面通过XMLHttpRequest或fetch API向Node.js服务器发起异步HTTP请求，适用于单次请求-响应模式的数据交互。
1、确保Node.js后端已启动并监听指定端口，例如使用Express框架监听3000端口。
2、在HTML5页面的
立即学习“前端免费学习笔记（深入）”；
3、处理响应时调用.then()方法解析JSON：response.json()。
4、在Node.js端路由中，设置响应头允许跨域：res.header('Access-Control-Allow-Origin', '*')。
二、使用WebSocket建立长连接
WebSocket提供全双工、低延迟的持久化连接，适合实时数据推送场景，如聊天、通知等。
1、在Node.js端安装ws库：npm install ws。
2、创建WebSocket服务器实例并监听端口，例如8080：const wss = new WebSocket.Server({ port: 8080 })。
3、在HTML5页面中创建WebSocket客户端：const socket = new WebSocket('ws://localhost:8080')。
4、监听open事件确认连接成功，并使用socket.send()发送消息：socket.send(JSON.stringify({ type: 'message', content: 'Hello' }))。
三、配置CORS解决跨域限制
当HTML5页面与Node.js服务部署在不同端口或协议下时，浏览器会因同源策略阻止请求，需在后端显式启用CORS支持。
1、若使用Express，安装cors中间件：npm install cors。
2、在应用中引入并使用：app.use(cors())。
3、手动设置响应头时，确保包含以下三项：Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers。
4、对于预检请求（OPTIONS），需在对应路由中返回204状态码并设置上述头信息。
四、使用axios替代原生fetch
axios是基于Promise的HTTP客户端，语法更简洁，自动序列化请求体并支持拦截器，适合复杂交互逻辑。
1、在HTML5页面中通过CDN引入axios：。
2、发送POST请求提交JSON数据：axios.post('http://localhost:3000/api/submit', { name: 'Alice' })。
3、在Node.js端使用express.json()中间件解析请求体：app.use(express.json())。
4、响应时统一设置Content-Type为application/json：res.json({ success: true, data: result })。
