Ajax Post Form across different domains apps

Question

I have a static html pages built with bootstrap and jquery. On which there is a contact us form on which i have set Ajax Post call to my django app.

The static html pages are hosted on windows server and my django app is hosted on heroku. On ajax call I am getting csrf token via jquery, but it returns null.

 $("#submit_button").click(function() {
        var from_name           = $("#Name").val();
        var from_email          = $("#email").val();
        var story_subject       = $("#Message").val();
        var csrftoken = getCookie('csrftoken');
        console.log(from_name);
        console.log(from_email);
        console.log(story_subject);
        console.log(csrftoken);
        $.ajax({
          type: 'POST',
          url: 'http://www.example.com/users/api-26/',
          useDefaultXhrHeader: false,
          crossDomain: true, // enable this
          dataType: 'jsonp',
          data: {
          'from_name': from_name,
          'from_email':from_email,
          'story_subject':story_subject,
          'csrfmiddlewaretoken': csrftoken
          },
          beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken')),
          },
          success: function (response_data) {
            var _result = JSON.parse(response_data);
            if(_result.status == 'True'){
              $('#myModal').hide();
              console.log("sent");
            }else{
              console.log(response.error.message);
            }
          },
          error: function(xhr, textStatus, thrownError) {
            console.log(xhr.status + ": " + xhr.responseText);
          }

        });
        return false;
      });

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 = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

and Django view

@csrf_protect
@require_http_methods(["POST"])
def Contactus(request):

As I am having problems with csrf token, is there any other way of making this call secure.

Cross-domain POST will not work even with correct CSRF token because of browser security measures. To get it working, you will need to set up CORS (http://stackoverflow.com/a/7605119/1059782). — Spc_555, Jun 30 '15 at 16:55

score 0 · Answer 1 · answered Jul 01 '15 at 02:17

0

As pointed out earlier you need to enable CORS (Cross-origin resource sharing) on your endpoint in order to perform Ajax operations or respond with JSONP which I would suggest as an easier method.

To enable CORS you could use the django-cors-headers package which has a few options to play with such as whitelists.

answered Jul 01 '15 at 02:17

Romeo Mihalcea

9,714
12
50
102

`console.log(csrftoken);` this prints null in my console. – Muhammad Taqi Jul 01 '15 at 04:43

Ajax Post Form across different domains apps

1 Answers1