解決済
「Django REST Framework + NextJSでインスタ風画像投稿サイト構築」でクロスドメイン制約で引っ掛かり新規投稿が出来ません。
Django
Next.js
React
2023/03/04 03:17

実現したいこと

新規投稿させたいです。

発生している問題

「送信」ボタンを押しても反応せず新規投稿ができません。
ブラウザの開発者ツールで「送信」ボタンを押して出ているエラーを確認したところ、どうやらdjangoに送信する過程でクロスドメイン制約でひっかかって送信出来ていないようです。

何をどのようにすればよいでしょうか?
初歩的な質問で申し訳ございません。

ソースコード

はるさんのソースコードをコピーしました。

自分で試したこと

ブラウザの開発ツールを立ち上げ、「送信」ボタンを押すと下記のエラーが表示されるのを確認しました。

Access to fetch at 'http://localhost:8000/api/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

補足情報

回答 2件
login
回答するにはログインが必要です

お騒がせしました。
自己解決しました。

Django側の「settings.py」に以下の記述が抜けていました。

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = ['http://localhost:3000']
1

解決したようで良かったです。

CORS系のエラーが発生したら、settings.pyの設定の見直しが必要ですね。

1