Next.jsアプリでのCorsエラーについて
Q&A
解決したいこと
Next.JSアプリでIPFSサイトから画像データを持ってこられるようにしたいです。
例）
Next.jsからweb3ライブラリを使って、NFTをリストアップするアプリを作ろうとしています。
記事を投稿する機能の実装中にエラーが発生しました。解決方法を教えて下さい。
・環境
Amazon Cloud9
Next.js
Piñata ipfs
Infura
Solidity
発生している問題・エラー
Access to XMLHttpRequest at 'https://gateway.pinata.cloud/ipfs/***' from origin 'https://***.vfs.cloud9.ap-northeast-1.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
### 自分で試したこと
1.next.config.jsファイルに以下を追加。（https://monotein.com/blog/nextjs-vercel-server-cors）
const nextConfig = {
reactStrictMode: true,
// ↓追加
async headers() {
return [
{
"source": "/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
}
]
},
// ↑追加
}
module.exports = nextConfig
2.next.config.jsファイルに以下を追加
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'https://api.example.com/:path*',
},
]
},
};
1
