sugi_711
@sugi_711

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Djangoのcorsエラーを解決したい

解決したいこと

Djangoのcorsエラーを解決したい

発生している問題・エラー

Access to fetch at 'https:〜' from origin 'https:〜' 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.

該当するソースコード

# settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'todo',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    "http:〜",  # フロントエンド(Next.js)のURL
]

詳細

フロントエンドはnext.jsで、バックエンドはDjangoを使用しています。
バックエンドをherokuにデプロイした段階で、ローカル(フロント)から
リクエストを送った時はうまくいっていました。

フロントエンドをvercelにデプロイした後で、
フロントからバックエンドにリクエストを送ると前述のエラーが出ます。

djangoのsettings.pyに設定するURLはvercelにデプロイした後のURLを設定しており、
スペルミスもないです。

0

1Answer

Fiddler などのツールを使って要求・応答をキャプチャし、上手くいくときとダメなときの違いを調べることをおすすめします。そこに原因を見つけるためのヒントがあるのではないかと思います。

具体例は以下の記事が参考になると思います。Fiddler のキャプチャ画像もあります。

CORS 非対応の場合のエラーメッセージ
http://surferonwww.info/BlogEngine/post/2024/04/02/error-messages-when-cors-is-not-working-at-server-side.aspx

CORS 非対応の場合のエラーメッセージ(その2)
http://surferonwww.info/BlogEngine/post/2024/06/04/error-messages-when-cors-is-not-working-at-server-side-2nd.aspx


【追記】

Access to fetch at 'https:〜' from origin 'https:〜' 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.

エラーメッセージには "Response to preflight request doesn't pass access control check:" とあるので「プリフライトリクエスト」が行われているようです。

django で「プリフライトリクエスト」を処理するための設定がされてないのが怪しい気がします。

ただ、

ローカル(フロント)からリクエストを送った時はうまくいっていました。

とのことなので、本番環境でも「ローカル(フロント)からリクエスト」と全く同じことをしているのであれば違うかもしれませんけど。そにかく一度そのあたりを調べてみてはいかがですか?

ちなみに、上の回答で紹介した記事にも書いてありますが、プリフライトリクエストで No 'Access-Control-Allow-Origin' header is present on the requested resource. という結果になったとすると、要求・応答をFiddler で見ると以下のようになっているはずです。

image1.jpg

OPTIONS メソッドを使って CORS に必要なヘッダを要求に含めて出しています (そこはブラウザの役割で、質問者さんは何もしなくてもブラウザが自動的に行います)。上の画像の赤枠部分を見てください。しかし、応答ヘッダに Access-Control-Allow-Origin が含まれないということでエラーになっています。

調べてみてください。

0Like

Comments

  1. @sugi_711

    Questioner

    回答ありがとうございます🙇

    初歩的なミスで大変申し訳ないのですが、
    herokuのログを見たら、そもそもherokuのデプロイが成功しておらず、
    これを解決したらcorsエラーは出ず、うまくいきました。

    質問の詳細で

    バックエンドをherokuにデプロイした段階で、ローカル(フロント)から
    リクエストを送った時はうまくいっていました。

    と書いていましたがこれは誤りで、デプロイしたがリクエストを送っているURLがローカルのバックエンドのままだからうまくいっていただけだと思います。
    すみません、、。

    単純にcorsの理解は浅いので、Fiddler使ってみようと思います。
    教えてくださってありがとうございます!

  2. そもそもherokuのデプロイが成功しておらず、
    デプロイしたがリクエストを送っているURLがローカルのバックエンドのまま

    だとすると、質問に書いてあったエラーメッセージ、

    Access to fetch at 'https:〜' from origin 'https:〜' 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.

    は何だったのですか?

Your answer might help someone💌