Node.js 使用 CORS 解决接口跨域问题(超简单教程)

发布于:2025-04-15 ⋅ 阅读:(68) ⋅ 点赞:(0)

目录

🧠 什么是跨域?

✅ 解决办法:使用 CORS 中间件

📁 项目结构

📦 第一步:初始化项目 & 安装依赖

✏️ server.js(语言类型:JavaScript)

🖥️ index.html(语言类型:HTML)

🚀 如何运行?

🧪 运行效果

📌 总结


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

🚀 如何运行?

  1. 启动后端服务器:

node server.js
  1. 打开 index.html用浏览器直接双击打开

  2. 点击按钮,会看到如下结果:


🧪 运行效果

打开浏览器页面,点击“点击获取跨域数据”按钮后,页面显示:

这是来自 Node.js 的跨域数据!

🎉 成功跨域获取数据!


📌 总结

  • 跨域问题在前后端分离项目中非常常见。

  • 使用 cors 中间件是解决跨域最简单、最推荐的方式。

  • 一行代码 app.use(cors()) 就能搞定!

 


网站公告

今日签到

点亮在社区的每一天
去签到