ReactJS中Fetch请求雅虎财经接口报错 浏览器访问正常

该报错和你的fetch请求逻辑无关，核心是浏览器同源策略（CORS）拦截：

• Python环境发起HTTP请求、直接在浏览器地址栏输入URL访问，都不受浏览器同源策略约束，因此可以正常获取返回数据
• 前端页面内通过fetch/XMLHttpRequest发起跨域请求时，浏览器会自动校验目标接口的响应头是否携带Access-Control-Allow-Origin等跨域允许字段，雅虎财经的该接口未配置面向前端调用的跨域许可规则，请求会被浏览器直接拦截，抛出NetworkError when attempting to fetch resource.错误
• 你测试用的公共JSON测试接口本身配置了全量跨域允许规则，因此可以正常请求，这也验证了你的请求逻辑本身没有错误。

方案1：自建后端代理（生产环境推荐） #

这是最稳定可靠的生产级方案：

• 自行开发一个后端接口（任意后端语言均可实现），由后端服务发起对雅虎财经目标接口的请求，拿到数据后返回给前端
• 前端只请求你自己部署的后端接口，既可以避免跨域问题，也可以自主控制请求频率、缓存逻辑，不会受雅虎接口的前端调用限制
• 该方案不存在公共服务稳定性、数据安全问题，适合正式上线的项目使用

方案2：本地开发代理（仅本地调试用） #

如果只是本地开发阶段调试功能，可以直接利用React脚手架自带的代理能力，不需要单独写后端：

• 如果你使用Create React App创建的项目，直接在项目根目录的package.json文件中添加如下配置：

"proxy": "https://query2.finance.yahoo.com"

• 前端请求时改用相对路径即可，示例请求代码：

const response = await fetch(`/v8/finance/chart/AAPL`)

• 本地开发服务器会自动把该路径下的请求转发到雅虎财经的对应接口，不会触发浏览器跨域拦截
  注意：该代理配置仅在本地npm start启动的开发环境生效，项目打包部署到生产环境后该配置不会生效，生产环境必须使用方案1的后端代理逻辑

方案3：公共CORS代理（仅临时测试用，严禁生产使用） #

如果只是临时做功能验证，可以使用公开的CORS代理服务转发请求，这类服务会在请求到雅虎接口数据后，给响应加上跨域允许头再返回给前端，绕过浏览器的跨域校验。

风险提示：公共CORS代理普遍存在稳定性差、请求频率限制严格的问题，同时所有你请求的参数、返回的数据都会经过第三方代理服务器，存在严重的数据泄露风险，绝对不能在正式上线的项目中使用。

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