目录
在做前后端分离开发时，我们经常会遇到 跨域问题。这篇文章通过一个简单的例子，教你如何使用 Node.js + Express + CORS 模块快速解决跨域问题。
🧠 什么是跨域？
跨域指的是：前端页面和后端接口的 协议、域名或端口号 不一样，浏览器出于安全限制会阻止请求。
比如：
页面地址是：
http://localhost:5500接口地址是：
http://localhost:3000
这就会发生跨域。
✅ 解决办法：使用 CORS 中间件
cors 是一个 Node.js 中间件，可以自动帮我们设置允许跨域的响应头，让前端能正常访问接口。
📁 项目结构
cors-demo/
├── server.js # Node.js 后端代码
├── index.html # 前端测试页面
📦 第一步：初始化项目 & 安装依赖
打开终端，依次执行以下命令：
mkdir cors-demo
cd cors-demo
npm init -y
npm install express cors
✏️ server.js（语言类型：JavaScript）
创建一个 server.js 文件，写入以下代码：
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
// 使用 CORS 中间件，允许所有来源跨域
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '这是来自 Node.js 的跨域数据！' });
});
app.listen(3000, () => {
console.log('服务器已启动：http://localhost:3000');
});
🖥️ index.html（语言类型：HTML）
创建一个 index.html 文件，写入以下代码，用于从浏览器测试接口跨域访问：
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>跨域测试</title>
</head>
<body>
<h1>前端页面</h1>
<button onclick="getData()">点击获取跨域数据</button>
<p id="result"></p>
<script>
function getData() {
fetch('http://localhost:3000/api/data')
.then(res => res.json())
.then(data => {
document.getElementById('result').textContent = data.message;
})
.catch(err => {
console.error('出错啦:', err);
});
}
</script>
</body>
</html>
🚀 如何运行？
启动后端服务器：
node server.js
打开
index.html（用浏览器直接双击打开）点击按钮，会看到如下结果：
🧪 运行效果
打开浏览器页面，点击“点击获取跨域数据”按钮后，页面显示：
这是来自 Node.js 的跨域数据！
🎉 成功跨域获取数据！
📌 总结
跨域问题在前后端分离项目中非常常见。
使用
cors中间件是解决跨域最简单、最推荐的方式。一行代码
app.use(cors())就能搞定！