Django + JS != CSRF

Question

我发现如果我在我的 django 项目中将我的 html 与 js 链接起来，CSRF 验证就会失败。请求中止。如果我不将 html 与该 js 链接，它会很好地工作。那么我该如何解决这个问题呢？这是 views.py 和 style.js 文件： 该网站是关于天气的。如果我按下按钮搜索未链接 js 的天气，它工作正常。

views.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) 

style.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