Node.js 编程实战：前后端结合 - 跨域与代理配置

在现代 Web 开发中，前后端分离已成为主流架构。在这种架构下，前端和后端通常部署在不同的域或端口上，因此跨域问题变得尤为重要。尤其在开发过程中，如何高效地处理跨域请求和配置代理，直接影响着前后端协作的效率和开发体验。

本文将详细介绍如何在 Node.js 中处理跨域问题，以及如何通过代理配置简化开发流程。

---

一、什么是跨域问题

跨域问题是指浏览器的同源策略（Same-Origin Policy）限制了不同域、协议或端口之间的相互访问。在前后端分离架构中，前端通常部署在一个域（如 localhost:3000），后端则部署在另一个域（如 localhost:5000）。这种情况下，前端发起的请求就会遇到跨域问题。

同源策略要求：协议、域名和端口三者必须完全相同，才能允许跨站请求。

---

二、跨域的解决方法

解决跨域问题的方法有很多种，最常见的有以下几种：

1. CORS（跨域资源共享） 后端通过设置 HTTP 头部，允许来自不同域的请求。

2. JSONP（JSON with Padding） 利用 <script> 标签的跨域能力，通常只支持 GET 请求。

3. 代理 前端开发时通过代理将请求转发到后端，避免浏览器的跨域限制。

---

三、Node.js 处理跨域：CORS

CORS 是目前最常用的跨域解决方案。CORS 是一种机制，允许浏览器向跨源服务器发出 XMLHttpRequest 请求，从而克服同源策略的限制。Node.js 可以使用 cors 中间件轻松实现。

1. 安装 cors 中间件

npm install cors

2. 配置 CORS

在 Node.js 中，通过使用 cors 中间件，可以允许指定源的请求。以下是一个基本的配置例子：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有来源的请求
app.use(cors());

// 只允许特定来源的请求
app.use(cors({
  origin: 'http://localhost:3000', // 允许的前端地址
  methods: 'GET,POST',
  allowedHeaders: 'Content-Type,Authorization'
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server' });
});

app.listen(5000, () => {
  console.log('Server is running on http://localhost:5000');
});

这种方式会自动为每个响应添加合适的 CORS 头，从而解决跨域问题。

3. 常见 CORS 配置选项

• origin ：设置允许访问的源，可以是一个域名，也可以是 * 来允许所有来源。
• methods：指定允许的 HTTP 方法。
• allowedHeaders：设置允许的请求头。

---

四、前端使用代理解决跨域

在开发阶段，前端可以通过代理将请求转发到后端，避免浏览器的跨域限制。前端开发框架如 React、Vue 等都提供了配置代理的方式。

1. React 中配置代理

在 React 项目中，最简单的代理配置方式是通过 package.json 文件中的 proxy 字段配置。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000"
}

当前端请求 /api/data 时，开发服务器会自动代理到 http://localhost:5000/api/data，避免了跨域问题。

2. Vue 中配置代理

在 Vue 项目中，可以通过 vue.config.js 来配置代理。

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
};

这样，当 Vue 前端发送请求时，所有请求都会被代理到 http://localhost:5000，解决了跨域问题。

---

五、Node.js 中配置代理转发请求

除了前端配置代理，后端的 Node.js 服务器也可以使用代理中间件将请求转发到目标服务器，常用的代理中间件是 http-proxy-middleware。

1. 安装 http-proxy-middleware

npm install http-proxy-middleware

2. 配置代理转发

在 express 中，可以通过 http-proxy-middleware 将请求转发到后端 API。

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理 API 请求
app.use('/api', createProxyMiddleware({
  target: 'http://localhost:5000', // 目标服务器
  changeOrigin: true,              // 更改源
  pathRewrite: {
    '^/api': ''                    // 重写路径
  }
}));

app.listen(3000, () => {
  console.log('Front-end server is running on http://localhost:3000');
});

通过这种方式，前端的请求 /api 会被代理到目标后端，避免了直接跨域请求。

---

六、总结

跨域问题是前后端分离架构中不可忽视的挑战，Node.js 提供了多种解决方案，其中 CORS 和代理是最常见的方式。在开发过程中，合理配置 CORS 和代理，可以有效避免跨域限制带来的问题，从而提升前后端协作效率。

• CORS：适合后端服务，能够灵活控制跨域请求的权限。
• 代理：适合开发环境，通过代理转发请求解决跨域问题。

在实际项目中，前后端结合的方式可以根据不同需求选择合适的跨域解决方案，以实现更高效、更稳定的开发过程。