CORS 和后端网络 – Deep Notes

1. 什么是 CORS？

CORS 代表跨域资源共享。

它是一种浏览器安全机制，限制前端应用程序向在不同源上运行的后端发出请求。

“起源”包括：

  • 协议（http/https）
  • 域名 (localhost / example.com)
  • 端口 (3000 / 5173)

如果其中任何一个不同→它将成为跨域请求。

2. 为什么会出现CORS错误？

示例：

前端运行于：

1
http://localhost:5173

后端运行于：

1
http://localhost:3000

由于端口不同，浏览器会阻止请求。

错误示例：

1
Access to fetch has been blocked by CORS policy

重要：
CORS 由浏览器强制执行，而不是由 Node.js 强制执行。

3. 如何修复 Express 中的 CORS

安装 CORS 包：

1
npm install cors

全局启用：

1
2
const cors = require("cors");
app.use(cors());

或者允许特定来源：

1
2
3
app.use(cors({
  origin: "http://localhost:5173"
}));

4. 预检请求（高级）

对于某些请求（PUT、DELETE、自定义标头），
浏览器首先发送一个 OPTIONS 请求。

这称为“预检请求”。

服务器必须正确响应，否则请求将失败。

5. 将服务器绑定到网络（重要的调试课程）

如果后端是这样启动的：

1
app.listen(3000);

它可能只绑定到本地主机。

要允许移动设备访问同一 WiFi：

1
2
3
app.listen(3000, "0.0.0.0", () => {
  console.log("Server running");
});

这允许外部网络设备连接。

6. 学到的常见实际调试问题

  • 由于服务器未运行而连接被拒绝
  • 使用了错误的IP地址
  • 防火墙拦截端口
  • 服务器未绑定到0.0.0.0
  • CORS 未启用

7. 区别：CORS 与网络错误

跨域资源共享错误：

  • 发生在浏览器中
  • 服务器实际接收到请求
  • 浏览器阻止响应

网络错误：

  • 服务器无法访问
  • IP或端口错误
  • 防火墙问题

8. 工程洞察力

了解网络基础知识可以使调试变得更加容易。

不要猜测，而是检查：

  1. 服务器是否正在运行？
    2、IP是否正确？
  2. 端口是否正确？
  3. 是否启用了CORS？
  4. 防火墙是否拦截？

9. 面试修改问题

  • 什么是起源？
  • 为什么存在 CORS？
  • 什么是预检请求？
  • 为什么要将服务器绑定到0.0.0.0？

主题 2 结束：CORS 和后端网络