Локальный хост с Django Rest из веб-клиента на базе MySQL и HTML не работает должным образом

Question

У меня проблемы с моим маленьким проектом, над которым я работаю, и приду к вам с надеждой получить некоторую помощь.

Сначала я задам простой вопрос, который может быть источником моей проблемы, но в случае, если это не так, я предоставлю свой код в настройках REST и на стороне веб-клиента. Так что ожидается длинный пост.

Я могу использовать мой веб-клиент с локального компьютера, на котором запущен localhost 127.0.0.1: 8000 , и все работает как чудо. Webclient запускается из браузера из моей школьной public_html системы. Как это настроить, я не уверен на 100%, но в основном мы можем настроить webpage запуск из школьной системы, используя папку и доступ к страницам из Интернета. Я получил index.html и такие вещи, как JS, Tabulator extension, Jquery, Ajax и т. Д. , запущенные из сценариев или локально установленные и включенные в теги <script>.

Я могу использовать команды GET/PUT/DELETE и т. Д., Поскольку я их настроил - так что все работает, когда я работаю на локальной машине через webclient.

Вопрос:

Должен ли я иметь возможность подключаться к REST с нелокальной машины, когда localhost 127.0.0.1:8000 запущен и работает на localmachine, откуда webclient размещен?

До сих пор мне не удавалось это сделать, и мне интересно, ошибочна ли моя гипотеза, чтобы я мог это сделать.

Когда я использую нелокальную машину, GET-запрос не получает никакого ответа и не отображается на CMD, где работает 127.0.0.1:8000. Локальная машина Я получаю ответ, даже когда настраиваю его на сбой (для тестирования). Но нелокальная машина, похоже, ничего не получает.

Если моя гипотеза верна, что она должна работать - будет ли проблема снова с CORS ?

Есть предложения?

Django settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'secretkey'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ["*"]
ACCESS_CONTROL_ALLOW_ORIGIN = ['http://www.cc.puv.fi']
ACCESS_CONTROL_ALLOW_HEADER = ['X-Requested-With', 'Content-Type', 'Origin', 'Cache-Control', 'Pragme', 'Authorization', 'Accept', 'Accept_Encoding']
ACCESSS_CONTROL_ALLOW_METHODS = ['PUT', 'POST', 'GET', 'OPTIONS', 'DELETE']


# Application definition

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes', 
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'lab',
]


MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True
#CORS_ALLOW_CREDENTIALS = True

#CORS_ORIGIN_WHITELIST = (
#  'http://www.cc.puv.fi',
 # 'http://127.0.0.1:8000',
#)

ROOT_URLCONF = 'lab.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'lab.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'dbname',
'USER': 'ursername',
'PASSWORD': 'password',
'HOST': 'host',
'PORT': 'port',
}
}

# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
 os.path.join(BASE_DIR, "static"),
 'D:\VAMK\lab\static', # HUOMAA D levy!!
]

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': [
    'rest_framework.renderers.JSONRenderer',
    'rest_framework.renderers.BrowsableAPIRenderer',
    'rest_framework_xml.renderers.XMLRenderer',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ],
}

Одна из страниц, использующих REST:

    <!DOCTYPE html>
<html>
<head>
<!-- BASE SETTINGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>
<link href="styles/style.css" rel="stylesheet">

<title> Vamk Database </title>
<!-- BASE SETTINGS -->  

<!-- SCRIPT FOR AXIOS -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>
<!-- SCRIPT FOR AXIOS -->

<!-- SCRIPT FOR JQUERY UI -->
<script
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous">
</script>
<!-- SCRIPT FOR  -->


<!-- SCRIPT FOR TABULATOR  -->
 <link rel="stylesheet" href="dist/css/tabulator.css"> 
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<!-- SCRIPT FOR -->

<!-- SCRIPT FOR -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<!-- SCRIPT FOR --> 

<!-- DOWNLOAD LIBS -->
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js"></script>

<script type="text/javascript">

//STORED PASSWORD AND USERNAME
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "extra.txt", false);
xhttp.send();

var x = xhttp.responseText;

var auther = x;
var validation = "";

// CHECKS IF THERE IS AUTH TOKEN IN DB
function getAuth(){
    var request = new XMLHttpRequest();
    request.open("GET", "http://127.0.0.1:8000/Valids/", false);
    request.setRequestHeader("Authorization", "Basic " + btoa(auther));
    request.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    request.send();
        array = JSON.parse(request.responseText);   
        if (array == "") {
            validation = false;
        }
        else {
            validation = true;
        }
    return validation;
}

//COOKIE CHECK
function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
</script>

</head>

<body>

<script type="text/javascript">
    getAuth();
</script>

    <div id="root">  

<div id="header" class="test">
        <h1> VAMK Laboratory Database </h1>
</div>

<div id="options">  

    <button id="show-ops" type="button" value="Show options" onclick=""> Toggle Options </button>
    <button onclick="window.location.href='authindex.html'" id="return">Return</button> 
    <button onclick="logout()" id="login">Logout</button>

    <div id="ops" style="display:none">
    <button id="download-pdf" class="downloads"> Download PDF </button>
    <button id="download-csv" class="downloads"> Download CSV </button>
    <button id="download-json" class="downloads"> Download JSON </button>
    <button id="download-xlsx" class="downloads"> Download XLSX</button>

    <button id="add-row" class="rows"> Add Row </button>
    <button id="del-row" class="rows"> Delete Rows </button>

    </div>

</div>

<div id="noacc" style="display=none">

<h1> No Access </h1>

</div>

<div id="example-table"></div>  

<script>

if ( validation != true) {
    console.log(validation);
    document.getElementById("noacc").style.display='block';
    document.getElementById("options").style.display='none';
    document.getElementById("example-table").style.display='none';      
}

else {  

    document.getElementById("noacc").style.display='none';

// DIV HIDING SCRIPT
$("#show-ops").click(function(){
        if (document.getElementById("ops").style.display == 'none') 
        document.getElementById("ops").style.display='block';
        else
        document.getElementById("ops").style.display='none';
});


/*
// Performing a GET request ! 
    axios({
    method: 'GET',
    url: 'http://127.0.0.1:8000/Vamk_Rs/',
    responseType: 'json'
}) 


  .then(function(response){  
  */

    var response = new XMLHttpRequest();
    response.open("GET", "http://127.0.0.1:8000/Vamk_Rs/", false);
    response.setRequestHeader("Authorization", "Basic " + btoa(auther));
    response.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
    response.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    response.send();

var array = JSON.parse(response.responseText);

console.log(array);

    if (response.status ==  200) {

// POSTING UPDATED CELL TO REST

$("#example-table").tabulator({
    cellEdited:function(cell){
            var data = cell.getData();
            var url = data.url;
            var posting = JSON.stringify(data);
            var update = new XMLHttpRequest();
                update.open("PUT", url, true);
                update.setRequestHeader("Authorization", "Basic " + btoa(auther));
                update.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
                update.setRequestHeader("Content-Type", 'application/json');
                    update.send(posting); 
},

// TABLE LAYOUT 
    layoutColumnsOnNewData:true,
    layout:"fitColumns",
    responsiveLayout:"hide",
    placeholder:"No Data Set",
    pagination:"local",
    paginationSize:50,
    addRowPos:"top",
    selectable: true,
    align: 'center',
    columns:[
        {title:"Select Row", field:"", width:'100'},
        {title:"Category", field:"category", headerFilter:"input", align:"center", editor: "input"},
        {title:"Value", field:"strenght", headerFilter:"input", editor:"input", width: '80'},
        {title:"Unit", field:"unit", headerFilter:"input", editor:"input", width: '80'},
        {title:"Part Number", field:"manufacturer_part_number", headerFilter:"input", editor:"input", width: '160'},
        {title:"Location", field:"storing_location", headerFilter:"input", editor:"input"},
        {title:"EC19 Location", field:"storing_location_ec19", headerFilter:"input", editor:"input"},
        {title:"Type", field:"ptypename", headerFilter:"input", editor:"input"},
        {title:"Description", field:"description", headerFilter:"input", editor:"input", width: '180'}, 
        {title:"Order Number Elfa", field:"order_number_elfa", headerFilter:"input", editor:"input", width: '150'},
        {title:"Order Number Farnell", field:"order_number_farnell", headerFilter:"input", editor:"input", width: '160'},
        {title:"Amount", field:"a", editor:"input", width: '80', headerFilter:"input"},
        {title:"Tilattu", field:"tilattu", editor:"input", width: '80', headerFilter:"input"},
        {title:"Kuittaus", field:"kuittaus", editor:"input", width: '80', headerFilter:"input"}, 
    ],

});

// DOWNLOAD OPTIONS!!!

//trigger download of data.csv file
$("#download-csv").click(function(){
    $("#example-table").tabulator("download", "csv", "data.csv");
});

//trigger download of data.json file
$("#download-json").click(function(){
    $("#example-table").tabulator("download", "json", "data.json");
});

//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
    $("#example-table").tabulator("download", "xlsx", "data.xlsx", {sheetName:"My Data"});
});

//trigger download of data.pdf file
$("#download-pdf").click(function(){
    $("#example-table").tabulator("download", "pdf", "data.pdf", {
        orientation:"portrait", //set page orientation to portrait
        title:"Example Report", //add title to report
    });
});

// ADD AND DELETE ROWS

//Add row on "Add Row" button click
$("#add-row").click(function(){
    $("#example-table").tabulator("addRow", {});
    var data = {
    "category": "",
    "strenght": "",
    "manufacturer_part_number": "",
    "storing_location": "",
    "storing_location_ec19": "",
    "ptypename": "",
    "tolerance": "",
    "description": "",
    "order_number_elfa": "",
    "order_number_farnell": null,
    "a": "",
    "tilattu": "",
    "kuittaus": ""
}
    posting = JSON.stringify(data);

    var request = new XMLHttpRequest();
            var url = "http://127.0.0.1:8000/Vamk_Rs/";
                request.open("POST", url, true);    
                request.setRequestHeader("Authorization", "Basic " + btoa(auther));
                request.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
                request.setRequestHeader("Content-Type", 'application/json');
                    request.send(posting); 
});


//Delete row on "Delete Row" button click
$("#del-row").click(function(){
  var rows = $('#example-table').tabulator("getSelectedRows");
    console.log(rows);
  $.each(rows, function(index, row) {
    console.log(rows);
    row.delete();
//SENDING INFO OF DELETED ROWS TO REST  
    var data = row.getData();
    console.log(data);
    posting = JSON.stringify(data);

    var request = new XMLHttpRequest();
            var url = data.url;
                request.open("DELETE", url, true);  
                request.setRequestHeader("Authorization", "Basic " + btoa(auther));
                request.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
                request.setRequestHeader("Content-Type", 'application/json');
                    request.send(posting);  
  });
});

// INIATE THE TABLE
 $("#example-table").tabulator("setData", array); 
}
}

function logout(){
    var req = new XMLHttpRequest();
            req.open("GET", "http://127.0.0.1:8000/Valids/", false);
            req.setRequestHeader("Authorization", "Basic " + btoa(auther));
            req.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
            req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            req.send();

            var tmpStr = req.responseText;
            var newStr = tmpStr.substring(1, tmpStr .length-1);
            console.log("newStr= " + newStr);
            var obj = JSON.parse(newStr);
            console.log("OBJ = " + obj);
            var url = obj.url;

            var del = new XMLHttpRequest();
            del.open("DELETE", url, false);
            del.setRequestHeader("Authorization", "Basic " + btoa(auther));
            del.setRequestHeader("X-CSRFToken", readCookie("csrftoken"));
            del.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            del.send();         
            window.location.href='index.html';
} 


</script> 



</div>

</body>

</html>

Извините, мой код в настоящее время очень грязный - пробовал разные вещи, чтобы решить проблему, и еще не решил ее. Надеюсь, вы сможете прочитать это.

Также извините, если я допустил ошибки в тексте, английский не мой родной язык.

Надеюсь увидеть ваши ответы! Спасибо!