Как правильно настроить заголовки запроса 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 таже проблема