Как правильно настроить заголовки запроса CORS для отправки на локальный IP устройства в сети?

Есть устройство подключенное к локальной сети. По IP http://192.168.100.8:443/data находятся данные json:

{
    "KeyboardBarcode": "",
    "barcode": "4630147580019",
    "devCode": "0",
    "height": "225",
    "itemNum": 0,
    "itemNum2": 0,
    "itemNum3": 0,
    "itemType": 0,
    "length": "315",
    "uniqueIndex": "816",
    "volume": "0.009639000",
    "weight": "659",
    "width": "136"
}

Я написал веб приложение, запускаю его на локальном сервере и имею локальный IP 127.0.0.1:8000. Мне нужно из js отправить запрос по адресу устройства и получить в ответ json. Но политика CORS не пропускает:

Access to XMLHttpRequest at 'http://user:[email protected]:443/data' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

хотя на стороне устройства указаны заголовки:

Access-Control-Allow-Origin: *
Content-Length: 295
Content-Type: application/json; charset=utf-8

Сам запрос отправляется из браузера. Вот код приложения: JS:

let urlInfoscan; // url устройства
let setTime = 1000; // 1 секунда
let id; // uniqueIndex
let timer; // повторный вызов функции
let status = document.querySelector('p'); // сообщения
let btnStart = document.querySelector('.start'); // запуск сканирования
let btnStop = document.querySelector('.stop'); // остановка сканирования
let btnUrl = document.querySelector('.url'); // ввод url
let btnToCsv = document.querySelector('.downloadCsv'); // экспорт в csv
//let trInner = document.querySelector('tr');
let login = 'user';
let pass = 'user';

// функция ввода url устройства
function url(){
    urlInfoscan = prompt('Введите url устройства: ');
    //if (urlInfoscan === "null"){
        //btnStart.classList.add('disabled');
    //}else{
    localStorage.setItem('url', urlInfoscan); // сохраняем в веб-хранилище
    let msg = localStorage.getItem('url'); 
    status.textContent = 'Сообщение: адрес устройства - ' + msg;
    //}
    
}


// функция парсинга json
function getJson() {
    let xhr = new XMLHttpRequest();
    let json;
    let obj;

    if (!localStorage.getItem('url')){
        url();
    }else{
        let url = localStorage.getItem('url');
        xhr.open('GET', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        //xhr.setRequestHeader('Authorization', 'Basic dXNlcjp1c2Vy');  
        //xhr.withCredentials = true; 
        
        //xhr.onreadystatechange = handler;    
        xhr.send();
    }
    
    if (xhr.status != 200) {
        status.textContent = "Сообщение: " + xhr.status + ': ' + xhr.statusText;
        clearInterval(timer);
        //btnStart.classList.remove('disabled');
        //btnStop.classList.add('disabled');
        //btnUrl.classList.remove('disabled');
    } else {
        json = xhr.responseText;
        obj = JSON.parse(json);
    }
    return obj;
}


// функция хранения ID 'uniqueIndex' скана
function getId(){
    let objId = getJson();
    id = objId.uniqueIndex; // передаем uniqueIndex
    localStorage.setItem('id', id);
}

// функция вывода содержимого сканирования в html-таблицу
function scan() {
    let table = document.querySelector('table.table-scan tbody');
    let row = document.createElement('tr');
    let obj = getJson();
    let id_;
    let barcode = '<td>' + obj.barcode + '</td>';
    let weight = '<td>' + obj.weight + '</td>';
    let volume = '<td>' + obj.volume + '</td>';
    let length_ = '<td>' + obj.length_ + '</td>';
    let width = '<td>' + obj.width + '</td>';
    let height = '<td>' + obj.height + '</td>';

    row.classList.add('inner');
   
    id_ = obj.uniqueIndex;
    // если id существует и не равен предыдущему скану
    if (id_ !== undefined & id_ !== localStorage.getItem('id')) {
        row.innerHTML = barcode + weight + volume + length_ + width + height;
        table.appendChild(row);
        localStorage.setItem('id', id_);
    }
    //if (trInner.classList.contains('inner')){
    //    btnToCsv.classList.remove('disabled');
   // }else{
   //     btnToCsv.classList.add('disabled');
   // }
}

// вызываем функцию scan() каждую секунду
function startScan(){
    timer = setInterval("scan()", setTime);
}

// отменяем функцию startScan()
function stopScan() {
    clearInterval(timer);
}


if (!localStorage.getItem('url') || (localStorage.getItem('url') === 'null')){
    status.textContent = 'Сообщение: адрес устройства не обнаружен';
    url();
}else{
    let msg = localStorage.getItem('url');
    status.textContent = 'Сообщение: адрес устройства - ' + msg;
    //btnStart.classList.remove('disabled');
    
}

btnStart.onclick = function(){
    startScan();
    btnStart.classList.add('disabled');
    btnUrl.classList.add('disabled');
    btnStop.classList.remove('disabled');
    btnToCsv.classList.add('disabled');
}

btnStop.onclick = function(){
    stopScan();
    btnStart.classList.remove('disabled');
    btnStop.classList.add('disabled');
    btnUrl.classList.remove('disabled');
    btnToCsv.classList.remove('disabled');
}



btnUrl.onclick = function(){
    url();
}

getId()

HTML:

<!DOCTYPE html>

<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <title>Scan Json</title>
</head>

<body>
    <section class="section-scan container">
        <div class="box">
            <h1>Данные c устройства</h1>
            <a href="#" class="btn start">Старт</a>
            <a href="#" class="btn stop disabled">Стоп</a>
            <a href="#" class="btn url">Адрес устройства</a>
            <a href="#" class="btn downloadCsv">Экспорт в CSV</a>
            <p class="status">Сообщение: </p>
            <table class="table-scan">
                <tr class="table-header">
                    <th>Штрихкод</th>
                    <th>Вес</th>
                    <th>Объем</th>
                    <th>Высота</th>
                    <th>Ширина</th>
                    <th>Длина</th>
                </tr>
            </table>
        </div>

    </section>

    <script src="js/script.js"></script>
    <script src="js/converToCsv.js"></script>
</body>

</html>

CSS:

.container {
    min-width: 700px;
    margin: 0 auto;
}

.container > div {
    min-width: 716px;
    padding: 15px;
    margin: 0 auto;
}

body {
    font-family: "Roboto", sans-serif;
    color: #3e3e3e;
}

h1 {
    text-align: center;
}

.btn {
    font-family: "Brutal Type", sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #151515;
    font-size: 11px;
    text-transform: uppercase;
    padding: 13px 20px 13px;
    background-color: #fed330;
    border-radius: 4px;
    display: inline-block;
    transition: 0.365s background;
    text-decoration: none;
    margin: 5px;
}

table {
    border-collapse: collapse;
    width: 100%;
    
}

th{
    border: solid 1px grey;
    padding: 15px 0;
    text-align: center;
    width: 16.6666%;
}

td{
    border: solid 1px grey;
    padding: 10px 0;
    text-align: center;
    width: 16.6666%;
}

.table-header {
    background-color: #fff;
}


.disabled {
    pointer-events: none;
    cursor: default;
    background: #999;
}

Подскажите что я делаю не так? PS. с fetch таже проблема


Ответы (0 шт):