构建实时监控页遇跨域：如何获取XMLHttpRequest响应码并绕过限制？

嘿，这个问题我之前做监控工具时也碰到过！浏览器的同源策略确实是个绕不开的坎，先给你明确说：完全绕过浏览器的跨域限制是不可能的——这是浏览器的核心安全机制，目的就是防止恶意网站窃取第三方数据。不过有几种合法的方案，能帮你实现「仅获取状态码」的需求，下面逐个给你拆解：

1. 配置目标服务器的CORS规则（最直接的方案） #

如果目标服务器是你自己可控的，那直接在服务器端配置CORS响应头就行，不需要改前端代码：

• 核心是添加 Access-Control-Allow-Origin 头，值设为你的监控页面域名（比如 https://your-monitor-site.com），或者用 * 允许所有域名访问（不推荐生产环境）。
• 如果你用的是HEAD请求（只拿状态码更高效），还要确保 Access-Control-Allow-Methods 包含 HEAD 方法。

举个Nginx配置的例子：

server {
  listen 80;
  server_name target-domain.com;

  location / {
    add_header Access-Control-Allow-Origin https://your-monitor-site.com;
    add_header Access-Control-Allow-Methods HEAD, GET;
    # 其他业务配置...
  }
}

配置完成后，你的XMLHttpRequest就能正常拿到真实的响应状态码了，哪怕你不需要响应内容。

2. 搭建服务器端代理（目标服务器不可控时用） #

如果目标服务器你没法修改，那就自己搭个中间代理服务器中转请求：

• 前端把请求发给自己的代理服务器，由代理服务器去请求目标地址（服务器端不受同源策略限制），最后把状态码返回给前端。

举个简单的Node.js代理示例（用Express+Axios）：

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

// 允许跨域访问代理接口（给前端用）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 代理接口，接收目标URL参数
app.get('/check-status', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl) return res.status(400).send('Missing target URL');
  
  try {
    // 用HEAD请求只拿状态码，更高效
    const response = await axios.head(targetUrl, {
      timeout: 5000
    });
    res.json({ status: response.status });
  } catch (error) {
    // 捕获错误，返回对应的状态码（比如404、500）
    res.json({ status: error.response?.status || 503 });
  }
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

然后前端请求这个代理接口就行：

fetch(`http://your-proxy-server.com/check-status?url=https://target-domain.com`)
  .then(res => res.json())
  .then(data => console.log('目标状态码:', data.status));

3. 利用资源标签的加载状态（仅做简单可达性判断） #

如果你不需要精确的状态码，只是想判断目标地址是否可达（比如区分「能响应」和「不可访问」），可以用<img>或<link>这类标签的加载事件：

function checkUrlReachable(url) {
  return new Promise((resolve) => {
    const img = new Image();
    // 加载成功=服务器能响应（一般是2xx状态）
    img.onload = () => resolve(true);
    // 加载失败=服务器不可达或返回4xx/5xx（但跨域时即使服务器正常响应，也可能触发error，这点要注意）
    img.onerror = () => resolve(false);
    // 加时间戳避免缓存影响判断
    img.src = `${url}?t=${Date.now()}`;
  });
}

// 使用示例
checkUrlReachable('https://target-domain.com').then(isReachable => {
  console.log(isReachable ? '服务器正常' : '服务器不可达');
});

这个方案的缺点是没法拿到精确状态码，只能做粗略判断，但胜在不需要后端支持。

总结 #

核心思路就两个方向：要么让目标服务器允许跨域访问（CORS），要么通过自己的服务器中转请求。完全绕过浏览器的同源限制是不可能的，这是浏览器的安全红线，别想着钻空子啦～

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