如何正确配置发送到网络上设备本地IP的CORS请求头？

问题描述

有设备连接到本地网络。通过 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"
}

我编写了一个 Web 应用程序，在本地服务器上运行它，并且本地 IP 为 127.0.0.1:8000。我需要从 js 向设备地址发送请求并获得 json 响应。但 CORS 政策不会跳过：

Access to XMLHttpRequest at 'http://user:user@192.168.100.8: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;
}

告诉我我做错了什么？附注。 fetch 也有同样的问题

对不起我的英语

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）