如何用JS获取非自有网站的HTTP响应状态码？

直接在前端JavaScript中无法直接实现，核心障碍是浏览器的**同源策略（Same-Origin Policy）**和CORS跨域限制。我来详细解释原因，并给出可行的解决方案：

为什么前端直接做不到？ #

浏览器为了安全，会阻止脚本从一个域名发起的请求访问另一个域名的资源，除非目标服务器主动配置了Access-Control-Allow-Origin等CORS响应头，明确允许你的域名跨域请求。

如果你尝试用fetch或XMLHttpRequest直接请求非自有网站：

// 这种写法会失败
fetch('https://non-your-site.com')
  .then(res => console.log(res.status))
  .catch(err => console.log(err));

浏览器会拦截请求，抛出类似No 'Access-Control-Allow-Origin' header is present on the requested resource的错误，你根本拿不到目标网站的响应状态码。

而且像<img>、<script>这类能加载跨域资源的标签，也只能判断资源是否加载成功（比如onload/onerror事件），无法获取具体的HTTP状态码——浏览器不会把这些敏感信息暴露给前端脚本。

可行方案：通过后端代理实现 #

解决思路是：让你的前端请求自己的后端接口，由后端去请求目标网站的资源（后端不受同源策略限制），获取状态码后再返回给前端。

下面是一个具体的实现示例：

1. 后端代理（Node.js + Express）

先写一个简单的后端服务，负责转发请求并返回状态码：

const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();

// 允许你的前端域名跨域访问这个接口
app.use(cors({ origin: 'https://your-website.com' }));

// 定义接口：接收目标URL参数，返回状态码
app.get('/get-status', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl) {
    return res.status(400).json({ error: '请提供目标网站URL' });
  }

  try {
    // 用HEAD请求（比GET更轻量）获取状态码，设置validateStatus为true避免非2xx状态码抛出错误
    const response = await axios.head(targetUrl, {
      validateStatus: () => true,
      timeout: 5000 // 设置超时时间
    });

    res.json({
      statusCode: response.status,
      statusText: response.statusText,
      url: targetUrl
    });
  } catch (error) {
    // 处理请求失败的情况（比如超时、DNS解析失败、连接拒绝等）
    res.json({
      statusCode: error.response?.status || 'N/A',
      message: error.message,
      url: targetUrl
    });
  }
});

app.listen(3000, () => {
  console.log('代理服务运行在 http://localhost:3000');
});

2. 前端调用代码

在你的网站上，通过这个后端接口获取状态码并展示：

// 封装获取状态码的函数
async function fetchWebsiteStatus(targetUrl) {
  const statusElement = document.getElementById('status-result');
  
  try {
    // 调用自己的后端接口，注意对URL进行编码
    const response = await fetch(`https://your-backend.com/get-status?url=${encodeURIComponent(targetUrl)}`);
    const data = await response.json();

    // 在页面上展示结果
    statusElement.innerHTML = `
      <p>目标网站：${data.url}</p>
      <p>状态码：<strong>${data.statusCode}</strong></p>
      <p>描述：${data.statusText || data.message}</p>
    `;
  } catch (err) {
    statusElement.textContent = `请求失败：${err.message}`;
  }
}

// 调用示例：比如页面加载时检查某个网站
window.addEventListener('load', () => {
  fetchWebsiteStatus('https://example.com');
});

注意事项 #

• 后端代理要处理各种异常场景：超时、DNS错误、重定向、目标服务器拒绝连接等，确保返回给前端的信息准确。
• 如果你担心被滥用，可以在后端添加请求频率限制、URL白名单等安全措施。
• 某些网站可能会阻止来自服务器的请求（比如检测到非浏览器UA），你可以在后端请求中模拟浏览器的User-Agent头。

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