代理服务器显示“未连接到互联网”的原因及解决方法

问题原因及修复方案 #

1. 代理请求缺失浏览器标识头，导致谷歌返回无网络页面 #

谷歌会校验请求的User-Agent等头信息，缺少时会判定为非浏览器请求，返回“未连接到互联网”页面。修改Server.js中的两个接口，添加模拟浏览器的请求头：

// 修改Server.js的/search接口
app.get('/search', (req, res) => {
  const query = req.query.q;
  const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
  const options = {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Accept-Language': 'en-US,en;q=0.9',
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
    }
  };
  https.get(googleSearchUrl, options, (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));
});

// 修改Server.js的/urls接口
app.get('/urls', (req, res) => {
 let targetUrl = decodeURIComponent(req.query.url);
 const client = targetUrl.startsWith('https://') ? https : http;
 const options = {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
    }
  };
 client.get(targetUrl, options, (response) => {
   let data = '';
   response.on('data', (chunk) => data += chunk);
   response.on('end', () => res.send(data));
 }).on('error', (err) => {
   console.error('Error fetching URL:', err.message);
   res.status(500).send('Error: ' + err.message);
 });
});

2. URL改写正则错误，无法替换页面链接 #

原rewriteUrls函数用"匹配转义引号，但实际谷歌返回的HTML是原始双引号，且替换路径写错为/proxy（实际接口是/urls），修改如下：

const rewriteUrls = (html, baseUrl) => {
  return html.replace(/(href|src)="([^"]*)"/g, (match, attr, url) => {
      try {
        const absoluteUrl = new URL(url, baseUrl).toString();
        return `${attr}="/urls?url=${encodeURIComponent(absoluteUrl)}"`;
      } catch (e) {
        return match; // 忽略无效URL，保留原链接
      }
  });
};

3. 新标签页缺少iframe元素，导致搜索报错 #

addNewTab函数创建的标签页未包含iframe，点击搜索会找不到元素，修改该函数：

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 src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" class="logo">
    <div class="search-box">
      <input type="text" id="${newTabId}-search-input" placeholder="Search Google or type a URL">
      <button onclick="browse('${newTabId}')">&#x1F50D;</button>
    </div>
    <div class="buttons">
      <button onclick="browse('${newTabId}')">Google Search</button>
    </div>
    <div class="search-results">
      <iframe id="${newTabId}-iframe" class="search-iframe" style="width: 100%; height: 80vh;" frameborder="0"></iframe>
    </div>
  `;
  document.body.appendChild(newTabContent);
}

关于X-Frame-Options的说明 #

你怀疑的跨域框架限制问题，实际不存在：你的iframe加载的是自己服务器返回的代理页面，而非谷歌官方页面，谷歌的X-Frame-Options不会影响这种场景。真正导致“未连接互联网”提示的是请求头缺失和URL改写错误。

内容的提问来源于stack exchange，提问作者ermmmmm