Почему на моем прокси-сервере отображается сообщение «Подключиться к Интернету?» ⇐ CSS

[Anonymous]

Итак, я размещаю работающий сервер с помощью VSC и создал прокси-сервер; в настоящее время я могу отображать ответ HTML/CSS от Google или любую введенную мной ссылку, но у меня проблемы с интерактивной частью JS. По какой-то причине, если вы вводите что-то вроде URL-адреса на работающем сервере и нажимаете что-нибудь, появляется сообщение: «Подключитесь к Интернету, вы не подключены к Интернету». Я понятия не имею, почему, хотя думаю, что это может быть потому, что я показываю информацию внутри iFrame. Вот мой код (если это поможет разместить на вашей стороне работающий сервер (если необходимо)):
Index.js:

Код: Выделить всё

let tabCount = 1;

function showTab(tabId) {
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(tabId).classList.add('active');

const tabElements = document.querySelectorAll('.tab');
tabElements.forEach(tab => tab.classList.remove('active'));
event.target.classList.add('active');
}

function addNewTab() {
tabCount++;
const newTabId = `tab${tabCount}`;
const newTab = document.createElement('div');
newTab.className = 'tab';
newTab.textContent = `Tab ${tabCount}`;
newTab.setAttribute('onclick', `showTab('${newTabId}')`);
document.querySelector('.add-tab').before(newTab);

const newTabContent = document.createElement('div');
newTabContent.id = newTabId;
newTabContent.className = 'tab-content';
newTabContent.innerHTML = `
[img]https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png[/img]


🔍

Google Search



`;
document.body.appendChild(newTabContent);
}

function browse(tabId) {
const searchInput = document.getElementById(`${tabId}-search-input`);
const iframe = document.getElementById(`${tabId}-iframe`);
const inputValue = searchInput.value.trim();

if (!inputValue) return;

const isUrl = /^https?:\/\//i.test(inputValue);
const fetchUrl = isUrl ? `/urls?url=${encodeURIComponent(inputValue)}` : `/search?q=${encodeURIComponent(inputValue)}`;

iframe.style.display = 'block'; // Show iframe
iframe.src = fetchUrl; // Dynamically load the content
}

document.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
const activeTab = document.querySelector('.tab-content.active');
const activeTabId = activeTab.id;
browse(activeTabId);
}
});

Server.js:

Код: Выделить всё

const express = require('express');
const https = require('https');
const http = require('http');
const app = express();
const port = 5507;

app.use(express.static('public'));

const rewriteUrls = (html, baseUrl) => {
return html.replace(/(href|src)="([^"]*)"/g, (match, attr, url) => {
const absoluteUrl = new URL(url, baseUrl).toString();
return `${attr}="/proxy?url=${encodeURIComponent(absoluteUrl)}"`;
});
};

app.get('/search', (req, res) => {
const query = req.query.q;
const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
https.get(googleSearchUrl, (response) => {
let data = '';
response.on('data', chunk => {
data += chunk;
});
response.on('end', () => {
const rewrittenData = rewriteUrls(data, googleSearchUrl);
res.send(rewrittenData);
});
}).on('error', (err) => {
res.status(500).send('Error: ' + err.message);
});
});

app.get('/urls', (req, res) => {
let targetUrl = req.query.url;
const client = targetUrl.startsWith('https://') ? https : http;

client.get(targetUrl, (response) => {
let data = '';
response.on('data', (chunk) => {
console.log('Sending URL results back');
data += chunk;
});
response.on('end', () => {
res.send(data);
});
}).on('error', (err) => {
res.status(500).send('Error: ' + err.message);
});
});

app.listen(port, () =>  {
console.log(`Server is running at http://localhost:${port}`);
});

Index.html:

Код: Выделить всё

Thing

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f3f4;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-bottom: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 0;
position: sticky;
top: 0;
z-index: 10;
}
.tab {
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
font-size: 16px;
color: #5f6368;
border-bottom: 3px solid transparent;
transition: border-color 0.3s;
}
.tab:hover {
color: #202124;
}
.tab.active {
color: #1a73e8;
border-bottom: 3px solid #1a73e8;
}
.add-tab {
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #5f6368;
padding: 0 10px;
transition: color 0.3s;
}
.add-tab:hover {
color: #202124;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
text-align: center;
margin-top: 50px;
}
.logo {
margin: 20px auto;
}
.search-box {
margin: 20px auto;
width: 60%;
display: flex;
align-items: center;
border: 1px solid #dfe1e5;
border-radius: 24px;
background-color: white;
padding: 5px 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.search-box input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
padding: 10px;
}
.search-box button {
background: none;
border: none;
cursor: pointer;
color: #5f6368;
font-size: 18px;
}
.buttons {
margin: 20px auto;
}
.buttons button {
margin: 5px;
padding: 10px 20px;
font-size: 14px;
color: white;
background-color: #1a73e8;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.buttons button:hover {
background-color: #1669c1;
}




Tab 1
+


[img]https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png[/img]


🔍

Google Search

Моя единственная проблема — проблема с подключением к Интернету. Спасибо всем, кто может мне помочь!

Подробнее здесь: https://stackoverflow.com/questions/792 ... e-internet