在 Django 中使用 ajax 时出现 XMLHttpRequest 错误

Question

我目前正在处理一个在 Django 视图中有一个表单的网页。此表单在其输入字段中采用艺术家、城市和州的名称。这些输入值最终将连接到一个链接到音乐会数据的 JSON 文件的 url（当我到达那部分时），但目前，我只是用硬编码值对其进行测试。应该在单击提交按钮时对这个 url 进行 ajax 调用（我还没有实现），但是现在，我只是在测试 ajax 调用本身是否可以工作。这是表单（我使用的是脆的表单，所以我没有手动添加输入字段）：

<form method= 'POST' action = ''>{% csrf_token %}
{{ form|crispy }}

<input type= 'submit' value= 'Submit'>

和 ajax 调用：

$.ajax({
    dataType:'json',
    url: 'http://api.bandsintown.com/events/search?artists[]=foals&location=New York,NY&radius=150&format=json&app_id=YOUR_APP_ID',
    success: function(data){
        //console.log(data);
        concertData = data;
        runMainProgram();
        $(data.tickets).each(function(index, value){
                console.log(value.p);
        });
    }
})

这是来自 forms.py 的页面表单：

class SearchForm(forms.Form):
    artist_select = forms.CharField()
    city = forms.CharField()
    state = forms.CharField()

我认为自从我添加了{% csrf_token %} 之后，跨源引用不会出错，但是当我加载页面时，我收到了错误：

XMLHttpRequest cannot load http://api.bandsintown.com/events/search?artists[]=foals&location=New%20York,NY&radius=150&format=json&app_id=YOUR_APP_ID. No 'Access-Control-Allow-Origin' header is present on the requested resource.

我可能误解了这个错误，但这似乎是问题所在。我应该如何解决这个问题？

Answer 1

您遇到错误是因为您没有在请求标头中发送 csrf_token：

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');

$.ajax({
    headers: {'X-CSRFToken': csrftoken}, // you add you token here
    dataType:'json',
    url: 'http://api.bandsintown.com/events/search?artists[]=foals&location=New York,NY&radius=150&format=json&app_id=YOUR_APP_ID',
    success: function(data){
        //console.log(data);
        concertData = data;
        runMainProgram();
        $(data.tickets).each(function(index, value){
                console.log(value.p);
        });
    }
})

用Django检查Ajax