查询Flow区块链主/测试网RPC接口触发CORS跨域错误如何解决

报错详情 #

从源地址http://localhost:3000发起的指向http://access.mainnet.nodes.onflow.org:9000/v1/scripts?block_height=sealed的fetch请求被CORS策略拦截：请求的目标资源未携带Access-Control-Allow-Origin响应头。若不透明响应用途可满足业务需求，可将请求mode设置为no-cors，在禁用CORS校验的情况下发起资源请求。

复现范围 #

• 查询Flow测试网、主网时均会触发该错误
• 本地localhost开发环境可稳定复现
• 部署在Vercel上的线上站点环境可稳定复现

已测试的RPC节点（均验证对应主网版本，均存在跨域问题） #

• https://access-testnet.onflow.org/
• http://access.devnet.nodes.onflow.org:9000/
• http://flow-testnet.g.alchemy.com:443/

解决方法 #

• 核心原因：Flow官方公开RPC节点默认未配置跨域响应头，本身定位是服务端调用接口，不支持浏览器前端直接访问。报错提示里提到的no-cors请求模式完全不适用于链上数据查询场景——该模式下返回的是不透明响应，前端无法读取返回的具体链上数据，满足不了业务需求。
• 方案1：搭建代理层转发请求。前端不要直接请求Flow节点，所有RPC请求先发到自有服务端接口，由服务端发起对Flow节点的请求后再把结果返回给前端，服务端通信不存在跨域限制。如果是Vercel部署的项目，可以直接用平台自带的Serverless Function/Edge Function配置反向代理，不需要额外购置服务器。
• 方案2：选用明确支持浏览器跨域访问的第三方RPC服务。挑选RPC服务商时提前确认其节点已配置Access-Control-Allow-Origin相关响应头，允许前端直接调用，不要直接使用各类公开的无跨域配置的公共节点。

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