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

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

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

配置跨域

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

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