我们已然在 Web3 分布式存储 IPFS(Web3项目一实战之四) 介绍了什么是IPFS,以及在本地电脑如何安装它。虽然在上一篇讲解了该怎么安装IPFS,也做了相应的配置,但在本地开发阶段,前端总是无法避免跨域这个远程请求api的”家常便饭的通病“。

很显然,对于出现跨域这类常见问题,您只要在搜索引擎敲上reactjs 跨域vue跨域nextjs 跨域等诸如此类关键字,不一会,搜索引擎为您罗列出了一大堆关于解决跨域的方案。

那么,在编写首页以卡片形式展示数据前,我们要在项目中配置跨域,以便可以在IPFS上存取文件。

配置跨域

文章已经写到了第五篇,想必您清楚了,本项目是使用create-next-app脚手架构建的项目,也就说,该项目是next.js项目了,但它也是react项目。

打开项目根目录下的next.config.js文件。加入如下图红框中的内容。