XMLHttpRequest cannot load due to access control checks for AJAX with Django

Question

I'm working on a project using Python(2.7) and Django(1.10) in which I'm using Ajax to make requests from Django templates and Django views.It was working perfectly well but then I have setup SSL on my server for this Django site and after I'm getting this error when making such requests:

Here's what I have done so far:

Here's my template add_category.html:

{% extends 'dashboard_base.html' %}
{% load staticfiles %}

{% block title %}
  <title>Category</title>
{% endblock %}

<!-- main content -->
    {% block content %}
    <div class="main-content">
        <div class="content-header clearfix">
          <h2 class="pull-left">Add New Category</h2>
          <ol class="breadcrumb pull-right">
            <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Add New Category</li>
          </ol>
        </div>

        <div class="content">
            <div class="clearfix">
                <div class="content-box">
                    <div class="content-box-header">
                        <h4>Add New Category</h4>
                    </div>
                        <div class="content-box-inner"> 
                            <form class="custom-form" action="{% url 'category_add' %}" method="post" id="addcategory">
                                {% csrf_token %}                                
                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <label>Category Name</label>
                                        <input type="text" name="title" id="title" class="form-control" placeholder="Category name">
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label>Category Position</label>
                                        <input type="number" name="position" id="position" class="form-control" min="1" value="1">
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <label>Description</label>
                                        <textarea class="form-control" placeholder="Description" name="description" id="description" ></textarea>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <label class="checkbox">
                                            <input type="checkbox" name="enable_category" id="enable_category" class="form-control" value="1" checked="checked">
                                            <span>Enable Category</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="button" id="add_category" class="btn btn-default bg-green"><i class="fa fa-floppy-o"></i>Save</button>
                                </div>
                            </form>
                        </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

{% block js %}
<script src="{% static 'dashboard/js/jquery.min.js' %}"></script>
<script src="{% static 'dashboard/js/category.js' %}"></script>
<script type="text/javascript">
    var baseurl="http://{{ request.META.HTTP_HOST }}/dashboard";
    var csrf="{{csrf_token}}";
</script>
{% endblock %}

I have tried to change the baseurl in {% block js %} above from http to https, but still the same error.

And here's category.js:

$('#add_category').click(function(){ 
  var title = $('#title').val().trim()
  var description = $('#description').val().trim()
  var position = $('#position').val()
  var enable_category = '';
  if(title.length == 0)
  {
    $('#title').addClass("data_is_empty");
    return false;
  }
  if(description.length == 0)
  {
    $('#description').addClass("data_is_empty");
    return false;
  }
  if(position.length == 0)
  {
    $('#position').addClass("data_is_empty");
    return false;
  }
  if(parseInt(position) < 1)
  {
    $('#position').addClass("data_is_empty");
    return false;
  }

  $("input:checkbox[name=enable_category]:checked").each(function(){
    enable_category = $(this).val()
  });

  data={}

  data['title'] = title;
  data['description'] = description;
  data['position'] =position;
  data['csrfmiddlewaretoken'] = csrf;
  data['enable_category'] = enable_category;
  console.log('-=-=-=-=-=-=-');
  console.log(data);

  url=baseurl+"/category/add/";
  $('.loader').css('display','block');
  $(this).attr('disabled','disabled');
  $.ajax({
        url:url,
        type:'POST', 
        data:data,                  
        success:function(response)
        {
          var message = JSON.parse(response);
          $('.loader').css('display','none');
          $(this).removeAttr('disabled');
          if(message.error)
          {
            $('#class_for_icon').removeClass('fa-check-circle')
            $('#class_for_icon').addClass('fa-ban')

            $('.flash_msg').css('display','block');
            $('.flash_msg_text').text('Some error occur.')
            window.setTimeout(function () {
                $(".auto_hide").fadeTo(500, 0).slideUp(500, function () {
                    $('.auto_hide').css('display','none');
                });
            }, 2000);
            // window.setTimeout(function () {
            //     location.reload();
            // }, 2000);
          }
          if(message.success)
          {
            $('#class_for_icon').removeClass('fa-ban')
            $('#class_for_icon').addClass('fa-check-circle')
            $('.flash_msg').css('display','block');
            $('.flash_msg_text').text('Saved Successfully')
            window.setTimeout(function () {
                $(".auto_hide").fadeTo(500, 0).slideUp(500, function () {
                    $('.auto_hide').css('display','none');
                });
            }, 2000);
            window.setTimeout(function () {
                location.reload();
            }, 2000);
          }
        }
   });
});

From views.py:

def category_add(request):
    user_type = ''
    try:
        user_type = request.session['user_type']
    except Exception as e:
        pass
    if user_type == 'admin':
        if request.method == "POST":
            title = request.POST['title']
            description = request.POST['description']
            position = request.POST['position']
            enable_category = request.POST['enable_category']
            try:
                if enable_category:
                    obj = Categories(title=title, description=description, position=position)
                    obj.save()
                else:
                    obj = Categories(title=title, description=description, enable_flag=0, position=position)
                    obj.save()
                return HttpResponse(json.dumps({'success': 'Updated Successfully'}))
            except Exception as e:
                return HttpResponse(json.dumps({'error': 'Something went wrong'}))
        if request.method == "GET":
            return render(request, "add_category.html")

And here's the complete error I'm receiving in the browser's console:

[Error] Not allowed to request resource
send (jquery.min.js:4:26582)

ajax (jquery.min.js:4:22185)
(anonymous function) (category.js:44)

dispatch (jquery.min.js:2:41778)

[Error] XMLHttpRequest cannot load http://www.orderfetchers.com/dashboard/category/add due to access control checks.
send (jquery.min.js:4:26582)
ajax (jquery.min.js:4:22185)
(anonymous function) (category.js:44) dispatch (jquery.min.js:2:41778)

Note:

It's just happening after enabling SSL for my site before that it was working perfectly well.

Another Update: In chrome I see this error: Mixed Content: The page at 'https://www.orderfetchers.com/dashboard/category/add' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.orderfetchers.com/dashboard/category/add/'. This request has been blocked; the content must be served over HTTPS.

Update: Here's my apache2 configuration:

Alias /static /home/abdul/Fetchors/static
  <Directory /home/abdul/Fetchors/static>
    Require all granted
  </Directory>

  Alias /media /home/abdul/Fetchors/media
  <Directory /home/abdul/Fetchors/media>
    Require all granted
  </Directory>

  <Directory /home/abdul/Fetchors/Fetchors>
    <Files wsgi.py>
      Require all granted
    </Files>
  </Directory>
WSGIScriptAlias / /home/abdul/Fetchors/Fetchors/wsgi.py
WSGIDaemonProcess django_app python-path=/home/abdul/Fetchors python-home=/home/abdul/Fetchors/venv
WSGIProcessGroup django_app

What can be wrong there?

Thanks in advance!

Hi @RoryMcCrossan, as I stated above I have tried by changing it to `https` but it still throws the same error. — Abdul Rehman, Feb 08 '19 at 11:52
did you setup static file serving block in https block at webserver? — Yugandhar Chaudhari, Feb 08 '19 at 11:59
I don't know how to do it, how I can I set it up? how can I add it in my `ssl apache configuration file`? — Abdul Rehman, Feb 08 '19 at 12:00
hi @YugandharChaudhari, I have added my `apache 2 configuration` file above, take a look, please! — Abdul Rehman, Feb 08 '19 at 12:08
see [this](https://stackoverflow.com/questions/32812570/configure-ssl-certificate-on-apache-for-django-application-mod-wsgi) they have configured to serve static on `443` — Yugandhar Chaudhari, Feb 08 '19 at 12:10
Still getting the same error, I'm really confused why it's still point that `XMLHttpRequest cannot load http://www.orderfetchers.com/dashboard/category/add/ due to access control checks.` even I have changed the url to `https` — Abdul Rehman, Feb 08 '19 at 12:18
I think you need to share the function called with `http://www.orderfetchers.com/dashboard/category/add` — HenryM, Feb 08 '19 at 13:16
Hi @HenryM, I have added the `views.py` above, take a look, please! — Abdul Rehman, Feb 08 '19 at 15:05
It looks like `user_type` isn't admin. Try adding an `else return HttpResponse(json.dumps({'user_type': user_type}))` and logging that to the console so see what it is. — HenryM, Feb 09 '19 at 18:05

XMLHttpRequest cannot load due to access control checks for AJAX with Django

Note:

0 Answers0