djangoでajaxを利用しようとすると、403エラーが出てしまう

Question

質問文を閲覧いただき、ありがとうございます。

djangoを使って開発しているwebアプリにおいて、ajaxを利用したいのですが、うまくいかず困っております。。汗
Dockerを使ったローカル環境上では問題なくajaxが利用できましたが、
実際に本番用のサーバー上で動かそうとしたら、デベロッパーツールのコンソールで以下のようなエラーが出てしまいます。

POST https: （WebアプリのURL） 403 (Forbidden)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
$.on.e @ (index):392
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

該当するajaxのコードは以下の通りです

    <script>

        function getCookie(name) {

        var cookieValue = null;

        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);

                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
        });


        $("#runTutorial_f, #tutorialLayer").on("submit", e => {

        e.preventDefault();

        $.ajax({
        'url': '{% url "WebアプリのURLが入っています" %}',
        'type': 'POST',
        'data': {
            'ajax_post': 'tutorial_done', 
        },
        'dataType': 'json'
        });
        });
    </script>

ローカル環境では動作するのですが、サーバ上では動作しないという状況です。サーバ上の設定なども一応確認しましたが、原因を発見できず、、、
どういった原因が考えられますでしょうか、、、？

知識不足のため稚拙な質問となっていたら大変恐縮ですが、原因や解決方法のヒントやアドバイスなどをご教示いただけますと幸いです。

何卒よろしくお願い致します！

Answer 1

下記のページはご覧になりましたか？
該当コードはPOSTしているので、おそらくCSRF関係でそのような事象になっていると思われます
Django ajax csrf

Comments

[osakana1990]

早速のご回答ありがとうございます
読んでいなかったです・・・！
まずはご案内いただいたページを読んでみようと思います！

[osakana1990]

ありがとうございます、解決しました！
ご教示いただいたページ内に書いてあったのですが、Ajaxのスクリプトの部分を以下のように変えたらサーバー上でも動くようになりました！
（旧）var csrftoken = getCookie('csrftoken');
（変更後）var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
アドバイスありがとうございました！