ExpressJS服务器CORS拦截图片请求问题求助

当前问题的核心是：img标签发起的跨域请求在部分场景下不会携带Origin头，而你的CORS配置未处理origin为undefined的情况，导致正则测试undefined时触发错误，最终服务器返回500。同时，当前预检请求（pre-flight）的配置未使用严格的校验规则，可能引发请求不一致的问题。

方案一：修复CORS校验逻辑，同时支持Origin和Referer校验 #

修改CORS配置，当请求无Origin头时，通过Referer头提取来源域名进行校验，同时处理origin为undefined的边界情况：

步骤1：添加Referer域名解析函数 #

// 从Referer头中提取域名
function getRefererDomain(req) {
  const referer = req.headers.referer;
  if (!referer) return null;
  try {
    const url = new URL(referer);
    return url.hostname;
  } catch (err) {
    return null;
  }
}

步骤2：修改testOrigin函数，处理undefined场景 #

const testOrigin = function (origin) {
  if (!origin) return false;
  let allowed = false;
  for (let i = 0; i < allowedOrigins.length; i++) {
    if (allowedOrigins[i].test(origin)) {
      allowed = true;
      break; // 匹配到后终止循环，提升性能
    }
  }
  return allowed;
};

步骤3：更新CORS配置，支持Referer校验 #

const corsOptions = {
  credentials: true,
  origin: function (origin, callback) {
    // 优先用Origin头校验
    if (testOrigin(origin)) {
      callback(null, true);
      return;
    }

    // 无Origin头时，尝试用Referer校验
    const refererDomain = getRefererDomain(this); // this指向当前请求对象
    if (refererDomain) {
      for (let i = 0; i < allowedOrigins.length; i++) {
        if (allowedOrigins[i].test(refererDomain)) {
          callback(null, true);
          return;
        }
      }
    }

    // 校验不通过，返回错误
    callback(new Error('Request origin or referer not allowed'));
  },
};

步骤4：修正预检请求的CORS配置 #

确保预检请求使用和实际请求一致的校验规则：

app.options('*', cors(corsOptions));

方案二：给静态资源单独配置宽松规则（适合非敏感图片资源） #

如果图片属于非敏感资源，可以针对/images路径单独配置CORS，绕过严格的Origin校验，仅通过Referer限制来源：

// 先处理图片资源，单独配置CORS规则
app.use('/images', (req, res, next) => {
  const refererDomain = getRefererDomain(req);
  if (!refererDomain) {
    return res.status(403).send('Forbidden');
  }

  let allowed = false;
  for (let i = 0; i < allowedOrigins.length; i++) {
    if (allowedOrigins[i].test(refererDomain)) {
      allowed = true;
      break;
    }
  }

  if (allowed) {
    // 给img标签设置宽松的CORS头
    res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    next();
  } else {
    res.status(403).send('Forbidden');
  }
}, express.static('images'));

// 模块资源使用严格的CORS校验
app.use('/modules', cors(corsOptions), express.static('modules'));

// 其他路由应用严格CORS
app.use(cors(corsOptions));

方案三：允许无Origin头的请求（不推荐，仅适用于完全信任的场景） #

如果图片资源无需严格限制，可直接允许origin为undefined的请求，但会降低安全性：

const corsOptions = {
  credentials: true,
  origin: function (origin, callback) {
    // 允许无Origin头的请求，或在允许列表内的Origin
    if (!origin || testOrigin(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`${origin} is not on list of allowed origins`));
    }
  },
};

优先选择方案一，它既保持了严格的权限控制，又兼容了img标签无Origin头的场景；如果图片属于非敏感资源，方案二是更轻量的选择。

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