在前端开发中，经常会遇到 跨域 问题，这会导致网络恳求失败，特别是在前后端别离的项目中。本文中，咱们将讨论 跨域 是什么以及怎么处理 跨域 问题。跨域 全称为 跨域资源共享（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 等专业服务器程序进行装备。详细装备办法能够参考相关文档。
