在本地开发环境中模拟交叉原始请求的流行工具和方法主要围绕处理和绕过浏览器施加的交叉原始资源共享(CORS)限制。这些工具通过使用代理或利用浏览器扩展和配置来启用本地服务器上的COR来帮助开发人员测试和调试交叉原始相互作用。以下是有关用于此目的的一些常见方法和工具的详细信息。
###了解CORS
交叉原始资源共享(CORS)是一种在浏览器中实现的安全机制，该浏览器限制了在一个OINCON(域，协议，端口)上运行的Web应用程序，除非服务器通过特定的HTTP标头明确允许其允许使用。 CORS通过服务器进行工作，以“ Access-Control-Allow-Origin”(例如允许哪些域访问资源)来发送回头。浏览器通过向某些类型的交叉呼叫发送“前飞行”请求(HTTP选项请求)来强制执行此操作，以便在提出实际请求之前检查权限。 CORS标头不仅可以控制哪些起源，还可以使用哪些HTTP方法和标题可以使用，以及是否可以发送凭证之类的凭据。
###地方发展挑战
在本地开发过程中，项目通常会在不同的本地主机端口或域上运行，这些端口或域算作不同的起源，并且触发了CORS的限制，从而使测试跨原始请求变得困难。开发人员需要在本地模拟或绕过这些限制的工具或配置，以允许其前端和后端正确通信，而不会影响生产环境。
###工具和方法用于在本地模拟或绕过CORS
1。本地服务器代理
代理是最强大，最广泛使用的解决方案之一。它涉及运行一个代理服务器，该服务器充当客户端和API服务器之间的中介服务，从而有效地通过相同的来源路由交叉原始请求，以避免CORS问题。
- 具有内置代理支持的开发服务器：许多前端开发工具，例如VITE，WebPack Dev Server，或创建React App支持配置代理。例如，创建React应用程序使开发人员可以在“ package.json”或“ setupproxy.js”中定义一个代理，该应用程序将API呼叫转发到在另一个端口或域上运行的另一台服务器。这样，浏览器认为它正在与相同的来源通信，因为请求是向开发服务器本身提出的，然后将其转发到目标API服务器。
- 独立代理服务器：HTTP-Proxy-Middleware(用于Node.js)或本地计算机上配置的NGINX等本地代理等工具可以用作路由请求并添加必要的CORS标头的代理。开发人员可以配置这些服务器，以随时修改响应，以包括`访问控制： *或其他适当的标头。
2。支持CORS的本地API副本
运行支持COR的API的本地实例是另一种有效的方法。通过使用Docker或本地设置，开发人员可以在开发模式下启用CORS在其机器上运行API，这使Localhost上的前端运行可以自由通信而无需限制。这具有完全控制的好处，并且不依赖外部环境。
3。开发浏览器扩展
为了进行快速测试或调试，许多开发人员使用浏览器扩展程序，这些扩展程序可以暂时禁用或修改CORS行为。这些工具应仅在开发中使用，从不生产：
-CORS UNBLOCK for CHROME：此扩展程序修改了请求标题，并通过注入必要的标题，以绕过绕过浏览器的CORS执行，从而启用交叉原始请求。
- Firefox无处不在的CORS：类似于Chrome的扩展名，它可以打开和关闭CORS限制，从而使开发人员可以在不更改服务器配置的情况下测试交叉呼叫。
- Safari的开发菜单：Safari允许通过菜单暂时禁用交叉原始限制，对进行本地测试的Mac用户有用。
4。运行本地Web服务器而不是打开文件
CORS错误的一个根本原因是将文件直接加载到浏览器中的文件：//`协议。许多教程和问答指出，没有Web服务器直接打开HTML页面会触发CORS错误，因为浏览器会阻止许多安全操作以进行安全性。因此，使用Python的内置HTTP服务器(`python3 -m http.server`)，节点的`http-server`软件包或实时服务器允许正确的localhost origins运行最小本地HTTP服务器(`python3 -m http.server`)，运行最小的本地HTTP服务器。
5。修改服务器响应标头
在开发自己的API或后端服务时，通常通过包括中间件或配置Web服务器来支持CORS来完成添加CORS标头。流行的后端框架和语言已经建立了启用COR的方法：
-node.js/express：使用“ CORS”中间件软件包简化了添加CORS标题。
-ASP.NET Web API：支持``[enablecors]''允许指定起源，方法和标头允许的属性属性。
-Django：诸如django-cors-headers'之类的中间件用于在本地启用CORS支持。
6。用公共或第三方代理绕开CORS
某些在线服务(例如，次受体服务)允许开发人员通过其代理服务器路由请求来测试API和绕过CORS。这些服务添加了适当的CORS标题，因此浏览器接受响应。当本地设置不可行，但应谨慎使用而不在生产环境中时，这种方法对于快速调试很有用。
***
###流行工具和技术摘要
- 开发服务器代理：在诸如VITE之类的工具中使用代理功能，创建React App，WebPack Dev Server。
- 本地代理服务器：node.js中的http-proxy-middleware，nginx配置为代理。
- 启用CORS的本地API：运行Docker容器或用于使用CORS开发的本地API实例。
- 浏览器扩展：CORS Unblock(Chrome)，CORS到处都是(Firefox)，Safari禁用交叉原始限制。
- 本地HTTP服务器：运行Python的`http.server`，节点的`http-server`或live-sterver''而不是使用file file：//`urls。
- 后端框架中间件：````co os''s node.js，`[enablecors]`在asp.net web api中，`django-cors-headers“ for django for django。
- 第三方代理服务：与临时绕过CORS的习惯和类似服务。