目录
在做前后端分离开发时,我们经常会遇到 跨域问题。这篇文章通过一个简单的例子,教你如何使用 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())
就能搞定!