在前端开发中，经常会遇到 跨域 问题，这会导致网络请求失败，特别是在前后端分离的项目中。本文中，我们将探讨 跨域 是什么以及如何解决 跨域 问题。跨域 全称为 跨域资源共享（CORS），它是浏览器的一种安全机制，仅允许网页请求同一域名下的服务。
所谓同一域名，要求协议、域名和端口全部一致。任何一项不一致，就会构成 跨域 请求。
1. 跨域问题的原因
在前后端分离的项目中，解决 跨域 的方法主要有三种：配置后端、配置前端和配置生产环境服务器。传统的代理方式，如 JSONP，由于不适用于 React 或 Vue 这类现代开发环境，并且存在安全隐患，因此我们在此不作详细介绍。
2. 配置后端解决 跨域
首先，浏览器是否启用 跨域 保护机制是根据后端的响应决定的。配置后端是最直接有效的方法，因为浏览器依据的是响应头中的 Access-Control-Allow-Origin。如果该字段的值为星号（*），则表示允许所有来源的请求；如果是一个具体的域名，则浏览器将不对该域名下的请求进行 跨域 保护。
3. 使用中间件配置 跨域
后端程序的语言和库不同，配置 Access-Control-Allow-Origin 的方法也会有所不同。如果使用的是 Node.js 和 Express，可以添加 cors 中间件。cors 默认允许所有 跨域 请求。若要限制特定域名，可以为 origin 配置项传递一个字符串或数组，用以指定允许 跨域 的域名。
4. 配置前端开发环境
第二种方法是在前端开发环境中配置代理。由于 跨域 是浏览器的安全机制，如果绕过浏览器直接发送请求，就不会受到 跨域 保护机制的影响。因此，我们可以使用一个中转服务器来发送请求和接收响应，前端只需请求这个中转服务器，并保持与其 URL 一致即可。
5. 使用前端脚手架配置代理
大多数前端脚手架都支持代理配置，例如 vite、create-react-app 等。以 vite 为例，其自带的开发服务器支持设置代理。在 vite 的配置文件（config.js）中，我们可以添加代理配置，将对 /api 路径的请求代理转发到真实的后端服务路径，并根据需要对转发的 URL 进行重写。
6. 手动创建中转服务器
第三种方法适用于生产环境或开发服务器不支持代理的情况。我们可以手动创建一个中转服务器来代理请求。例如，将打包好的前端项目放置在 dist 目录下，入口文件为 index.html。使用 Express 创建服务器，负责发送前端页面并代理请求。
7. 配置代理服务器示例
我们可以将所有请求响应都返回到 dist 目录下的 index.html 文件，但对于 /api 路径，我们仍需配置代理。这时需要安装 http-proxy-middleware 依赖库，它与 webpack 底层使用的代理服务器相同，配置也几乎一致。不同之处在于 webpack 中的 rewrite 规则，在这里称为 pathRewrite。
8. 启动服务器展现前端页面
启动此服务器后，它将负责展示前端生产环境的页面。可以看到，即便移除后端的 跨域 支持，前端依然能够成功请求后端数据。除了 Express，还可以使用 Nginx 等专业服务器程序进行配置。具体配置方法可以参考相关文档。
原文链接：https://juejin.cn/post/7352079441525063691 作者：垂慕容
