如何使用Charles代理映射本地文件且避免CORS错误？

问题原因 #

使用Charles的Map Local返回本地文件时，默认不会携带CORS相关响应头。虽然OPTIONS预检请求能成功，但实际POST请求因缺少必要的CORS头，被浏览器拦截报错。

具体解决方法 #

方法1：给目标Map Local规则添加CORS响应头 #

1. 打开Charles，进入Tools → Map Local，找到你配置的www.foo.com/search规则
2. 选中规则点击Edit，切换到Response标签页
3. 在Headers区域添加以下头信息（根据实际请求调整）：
   • Access-Control-Allow-Origin: http://localhost:3000（比*更安全，精准匹配本地开发地址）
   • Access-Control-Allow-Methods: GET, POST, OPTIONS
   • Access-Control-Allow-Headers: Content-Type（若请求有自定义头，需一并添加）
4. 保存规则后重新发起请求

方法2：用Rewrite功能批量添加CORS头 #

如果需要处理多个接口的CORS问题，Rewrite更高效：

1. 进入Charles的Tools → Rewrite，点击Add创建新规则组
2. 在Location标签页设置匹配条件：匹配www.foo.com/search（或更宽泛的域名规则）
3. 切换到Response标签页，点击Add分别添加以下规则：
   • 类型选Add，头部名称Access-Control-Allow-Origin，值填http://localhost:3000
   • 类型选Add，头部名称Access-Control-Allow-Methods，值填GET, POST, OPTIONS
   • 类型选Add，头部名称Access-Control-Allow-Headers，值填你请求中用到的头（如Content-Type）
4. 启用该规则组后测试请求

注意事项 #

• 确保POST请求的Content-Type与OPTIONS预检请求中声明的一致，否则浏览器仍会拦截
• 本地开发完成后，记得关闭这些CORS规则避免影响正常代理

内容的提问来源于stack exchange，提问作者spinners