如何使用Charles代理映射本地文件而不引起CORS错误？

Question

我正在开发一个 Web 应用程序，该应用程序对返回搜索结果的特定端点进行 XHR 调用，例如www.foo.com/search

来自端点的 json 响应将会发生变化，因此我想使用本地代理（在我的例子中为 Charles）来模拟这个新响应以进行本地开发。我知道我可以模拟应用程序代码中的数据，但我真的很想在网络级别模拟它。

Charles 具有

Map Local

的功能，可以捕获请求并在响应正文中返回本地文件的内容。这对我不起作用。当我尝试在本地开发应用程序（在

localhost:3000

上运行）中发出请求时，出现 CORS 错误。我可以看到 OPTIONS 预检请求成功，但 POST 请求失败。

是否可以使用 Charles 解决 CORS 错误？

Answer 1

所以这里的问题是，您正在修改

foo.com/search

的响应，但

Access-Control-Allow-Origin

响应标头仍然保持不变（

Access-Control-Allow-Origin=foo.com

）。因此，localhost:3000 在这里抛出 CORS 错误。

绕过 CORS：要绕过此错误，您首先需要创建一个标头修改，将

Access-Control-Allow-Origin

标头值更新为

*

。这可以在 Requestly 中使用this Header Rule来实现。

修改响应：绕过 CORS 错误后，现在您可以使用映射本地规则，这将修改请求的响应。这是相同的请求响应规则

Answer 2

在 Charles Proxy 中，您可以使用

Rewrite

 添加 

Access-Control-Allow-Origin=*

 标头。您仍然需要像以前那样

Map Remote

到本地，然后在本地主机位置上启用

Rewrite

以附加标头。