React应用调用公开REST API遇CORS安全错误，求解决方案

你遇到的确实是浏览器同源策略导致的CORS错误——浏览器不允许前端页面直接从不同域名的服务器请求数据，哪怕你能在地址栏正常访问这个API也不行。以下是几种适合你的解决方法：

方法1：配置React开发服务器代理（推荐，开发环境专用） #

React内置的开发服务器支持代理转发，只需简单配置就能绕过CORS限制：

1. 在项目根目录的package.json文件中添加一行代理配置：

"proxy": "http://geocode.maps.co"

2. 修改你的fetch请求URL，去掉完整域名，只保留路径部分：

const response = await fetch(`/search?q=${input}`);

这样当你发起请求时，React开发服务器会自动把请求转发到http://geocode.maps.co，浏览器看到的是同源的localhost:3000请求，就不会触发CORS拦截。

方法2：使用临时CORS代理（仅用于快速测试） #

如果不想修改配置，可以借助第三方CORS代理服务转发请求，比如修改fetch的URL：

const response = await fetch(`https://cors-anywhere.herokuapp.com/http://geocode.maps.co/search?q=${input}`);

注意：这种方法仅适合本地测试，第三方代理可能有流量限制，且生产环境使用会有安全风险，不推荐上线。

方法3：临时禁用浏览器CORS限制（仅个人测试） #

如果你只是自己本地调试，可以通过启动参数禁用浏览器的CORS检查：

• Chrome：关闭所有Chrome窗口后，在命令行执行：

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

• Firefox：安装CORS相关插件（如CORS Everywhere）临时绕过限制
  这种方法只能用于个人调试，绝对不能让用户这么做。

额外提示：修正请求参数的小错误 #

你的代码里模板字符串多了一对多余的大括号：q={${input}}，会导致请求参数变成q={64102}（和错误信息里的一致），这可能让API无法正确解析参数，建议改成：

const response = await fetch(`/search?q=${input}`);

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