Next.jsにてPostgreSQLのデータを取得したい
質問概要
Next.js + GraphQL + Prisma + PostgreSQLでサービス作りの練習をしています。Prismaが出しているサービス開発トレーニングの内容です。
Creating a GraphQL Contextのセクションにてコードを書き、
にアクセスしてみるとInternal Server Errorになってしまいます。
npx diagnose-endpoint@1.0.12 --endpoint=http://localhost:3000/api/graphql
で原因調査をしてみると、
⚠️ OPTIONS response is missing header 'access-control-allow-methods: POST'
⚠️ POST response missing 'access-control-allow-origin' header.
この二つが原因っぽいのですが、これを解決する方法をご教授願いたいです。
データベースはHerokuのPostgreSQLを使用しています
試したこと
以下の通りコード追加
// /pages/api/graphql.ts
export default cors(async function handler(req, res) {
//追加
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader(
"Access-Control-Allow-Origin",
"https://studio.apollographql.com"
);
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers"
);
res.setHeader(
"Access-Control-Allow-Methods",
"POST, GET, PUT, PATCH, DELETE, OPTIONS, HEAD"
);
//以下チュートリアルの通り
0