第五章 跨域处理

内容前瞻

本章将深入探讨 跨域问题 及其解决方案，重点介绍如何使用 http-proxy-middleware 模块实现跨域代理。通过本章的学习，你将掌握：

• 跨域问题的本质与常见解决方案。
• 如何使用 http-proxy-middleware 配置代理服务器。
• 跨域代理的实际应用场景与注意事项。

---

跨域问题

1. 什么是跨域？

• 同源策略：浏览器出于安全考虑，限制从一个源加载的文档或脚本与另一个源的资源进行交互。
• 跨域条件：协议、域名、端口任一不同即视为跨域。

2. 跨域的常见解决方案

• CORS（跨域资源共享）：服务器设置响应头允许跨域请求。
• JSONP：通过 <script> 标签加载跨域数据（仅支持 GET 请求）。
• 代理服务器：通过中间服务器转发请求，绕过浏览器的同源策略。

---

跨域代理

1. http-proxy-middleware

• 作用：基于 Node.js 的代理中间件，常用于开发环境中解决跨域问题。
• 特点：
  • 支持 HTTP、HTTPS、WebSocket 代理。
  • 可配置路径重写、请求头修改等功能。
• 应用场景：前端开发中，本地开发服务器需要访问后端 API 时。

2. 配置代理

• 安装：

  npm install http-proxy-middleware --save-dev

• 配置示例：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function (app) {
    app.use(
      createProxyMiddleware('/api', {
        target: 'http://127.0.0.1:xxxx', // 目标服务器地址
        changeOrigin: true, // 修改请求头中的 Origin 为目标服务器地址
        ws: true, // 支持 WebSocket 代理
        pathRewrite: { '^/api': '' }, // 路径重写，去除请求路径中的 /api
      })
    );
  };

• 参数说明：

  • target：目标服务器地址。
  • changeOrigin：修改请求头中的 Origin，通常设置为 true。
  • ws：是否支持 WebSocket 代理。
  • pathRewrite：路径重写规则，常用于去除请求路径中的前缀。

3. 实际应用

• 开发环境：在本地开发服务器中配置代理，访问后端 API。
• 生产环境：通常由 Nginx 或反向代理服务器处理跨域请求。

---

重难点 & 容易忽视的点

1. 路径重写的注意事项

• 路径匹配：确保路径重写规则与请求路径一致。
• 路径前缀：去除路径前缀时，注意目标服务器的路由配置。

2. WebSocket 代理

• 配置：ws: true 启用 WebSocket 代理。
• 应用场景：实时通信、聊天室等需要 WebSocket 支持的场景。

3. changeOrigin 的作用

• 修改请求头：将请求头中的 Origin 修改为目标服务器地址，避免被目标服务器拒绝。

---

总结

• 跨域问题：浏览器的同源策略限制了跨域请求，常见解决方案包括 CORS、JSONP 和代理服务器。
• http-proxy-middleware：强大的代理中间件，支持 HTTP、HTTPS、WebSocket 代理，适用于开发环境中的跨域请求。
• 配置代理：通过 target、changeOrigin、pathRewrite 等参数灵活配置代理规则。
• 应用场景：本地开发服务器访问后端 API，或生产环境中的反向代理。