Django + JS != CSRF

Question

我發現如果我在我的 django 項目中將我的 html 與 js 鏈接起來，那么 CSRF 驗證就會失敗。 請求中止。 如果我不將 html 與該 js 鏈接，它工作得很好。 那么我該如何解決這個問題呢？ 這是views.py 和style.js 文件：該站點是關於天氣的。 如果我按下按鈕搜索未鏈接 js 的天氣，它工作正常。

視圖.py

def index(request):
    owm = pyowm.OWM(":)")
    mgr = owm.weather_manager()

    if(request.method == "POST"):
        form = CityForm(request.POST)
        form.save()

    form = CityForm()
    city = City.objects.last()
    
    result = get_todays_weather(mgr, city.name)
    forecast_hourly = get_todays_forecast(mgr, city.name) 

    context = {
        "info": result,
        "forecast_hourly": forecast_hourly,
        "form": form
    }

    return render(request, "index.html", context) 

樣式.js

var check = function () { 
    var hours = new Date().getHours();
    hours = 3
    if (hours < 5  )
    { 
      document.getElementById("header_id").style.background = "linear-gradient(to bottom, #692dad, #442aa3)";
      document.getElementById("brand_id").style.color = "#f9fbfc";
      document.getElementById("body_id").style.background = "#8f7cd6";
      document.getElementById("brand_id").style.color = "#f9fbfc";

      var elements = document.getElementsByClassName("nav-link");
      for(var i = 0; i < elements.length; i++)
      {
          if(elements[i].className != "nav-link active")
          {
            elements[i].style.color = "#f9fbfc";
          } 
      }
      document.getElementById("search_btn").style.color = "#f9fbfc"
      document.getElementById("second_card_id").style.background  = "linear-gradient(to bottom, #692dad, #442aa3)";
      var cards = document.getElementsByName("card");
      for(var i = 0; i < cards.length; i++)
      { 
          cards[i].style.background = "linear-gradient(  white 25%, #692dad 50%, white 75% )";
      }
      document.getElementById("card_title_id").style.color = "#f9fbfc";
      document.getElementById("footer_id").style.background = "linear-gradient(to bottom, #692dad, #442aa3)";

    }
    else if (hours < 8  && hours > 5)
    {
        document.getElementById("header_id").style.background = "linear-gradient(to top, #e2e498, #4718f0)";
        document.getElementById("search_btn").style.color = "#f9fbfc"
    }
    else
    {
        document.getElementById("header_id").style.background = "linear-gradient(to top, #ffffff, #C2D0FA)";
        document.getElementById("search_btn").style.color = "#FBFBFB";
        document.getElementById("search_btn").style.background = "#2E50B0";
        var cards = document.getElementsByName("card");
        for(var i = 0; i < cards.length; i++)
        {
            //cards[i].style.background = "#D5B2EB"; 
            cards[i].style.background = "linear-gradient(  white 25%, #adc1fd 50%, white 75% )";
        }
    
    }
  }
  

check();

Answer 1

django 文檔中有一部分描述了如何從 javascript 獲取 CSRF 令牌。 我在一些使用 Django REST 框架從 js 查詢 api 視圖的教程中看到了這一點。 可能是一個很好的起點。

https://docs.djangoproject.com/en/3.1/ref/csrf/#ajax