如何在本地开发中快速解决 Express 服务器的 CORS 问题-js教程-PHP中文网

如何在本地开发中快速解决 Express 服务器的 CORS 问题

本文教你用最简方式（cors 中间件）解决树莓派 Node.js 服务与本地网页间的跨域请求失败问题，无需深入理解 CORS 原理，专注实操配置与常见坑点。

本文教你用最简方式（`cors` 中间件）解决树莓派 node.js 服务与本地网页间的跨域请求失败问题，无需深入理解 cors 原理，专注实操配置与常见坑点。

在本地局域网项目（如 PC 控制树莓派 GPIO）中，CORS 报错（如 CORS request did not succeed）并非安全风险，而是浏览器对跨源请求的默认拦截机制。你已正确识别了核心矛盾：这不是线上部署问题，而是本地开发环境下的配置缺失。关键在于——Express 默认不处理 CORS 头，手动设置 res.writeHead() 不仅位置错误（应在路由处理前），且无法覆盖预检（preflight）请求所需的所有响应头。

BrandCrowd

BrandCrowd是一款面向品牌创建的在线 Logo 设计和营销素材生成工具。

下载

✅ 正确解法：使用 cors 中间件（一行生效）

安装依赖
在树莓派项目目录下执行：
```
npm install cors
```

修改服务器代码（关键顺序！）
将 cors() 中间件置于所有路由和 express.json() 之前：

require('dotenv').config();
const express = require('express');
const cors = require('cors'); // ✅ 引入
const app = express();

const port = process.env.API_PORT || 6464;

// ✅ 必须放在所有路由和解析中间件之前
app.use(cors()); // 允许任意源、任意方法、任意头（适合本地调试）

// ✅ 解析 JSON 请求体（必须在 cors 之后，但仍在路由前）
app.use(express.json());
app.use(express.urlencoded({ extended: true })); // 如需处理表单数据

// ✅ 路由定义（现在可正常接收 POST 数据）
app.post('/toggle', (req, res) => {
  const state = req.body.state; // ⚠️ 注意：是 req.body，不是 req.query！
  console.log('Received state:', state);

  // 示例响应
  res.json({ success: true, received: state });
});

app.listen(port, () => {
  console.log(`API server listening on http://localhost:${port}`);
});

⚠️ 关键注意事项

前端 fetch 已正确：你的 Content-Type: application/json 和 JSON.stringify() 没问题，但后端必须用 express.json() 解析（已添加）。
req.body vs req.query：POST 请求的数据在 req.body（需 express.json()），req.query 仅用于 URL 参数（如 /toggle?state=on）。
Firefox 的特殊限制：你发现 Firefox 对 localhost/局域网跨域更严格——这是已知行为。cors() 中间件可解决，但若仍失败，可临时添加明确配置：
```
app.use(cors({
  origin: ['http://localhost:3000', 'http://192.168.68.75:8080'], // 替换为你的前端地址
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type']
}));
```
避免手动写响应头：res.writeHead() 在路由内调用会覆盖 Express 的标准响应流程，且无法处理 OPTIONS 预检请求——这正是 CORS request did not succeed 错误的根源。