在Django中使用Ajax時出現XMLHttpRequest錯誤

Question

我目前正在處理在Django視圖中具有表單的網頁。 此表單在其輸入字段中使用藝術家，城市和州的名稱。 這些輸入值最終將被鏈接到一個URL，該URL鏈接到用於音樂會數據的JSON文件（當我到達該部分時），但是目前，我只是使用硬編碼值對其進行測試。 單擊提交按鈕時（應該也尚未實現），應該對此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