手动发起CORS预检请求失败，如何提前验证CORS兼容性？

你遇到的核心问题是：手动发送的OPTIONS请求被浏览器再次预检了——因为你在请求里加了Access-Control-Request-Method这类CORS预检专属头，这属于非简单请求，浏览器会自动给它发一层预检OPTIONS，但你的服务器只允许GET和PUT，所以这层额外的预检直接失败了，反而没法验证真正的PUT请求CORS是否正常。

可行的解决方案：触发浏览器自动预检，提前中止实际请求 #

不需要手动发OPTIONS，而是让浏览器自动触发PUT请求的预检，同时通过中止请求避免实际发送PUT内容（不会修改服务器数据），以此判断CORS是否正常。

代码示例 #

async function validatePutCors(uri) {
  const abortController = new AbortController();
  const { signal } = abortController;

  try {
    // 构造需要预检的PUT请求，但用空内容避免修改资源
    const requestPromise = fetch(uri, {
      method: 'PUT',
      headers: {
        'x-ms-date': new Date().toUTCString(),
        'x-ms-version': '2020-04-08', // 替换为你的服务要求的版本
        'x-ms-blob-type': 'BlockBlob'
      },
      signal,
      body: new Blob() // 空Blob，无实际数据
    });

    // 立刻中止请求，只让浏览器完成预检步骤
    abortController.abort();

    // 等待请求结果
    await requestPromise;
  } catch (err) {
    if (err.name === 'AbortError') {
      // 触发中止错误，说明预检已经通过（浏览器允许发送PUT请求）
      return true;
    } else if (err instanceof TypeError && err.message.includes('CORS')) {
      // 捕获到CORS错误，说明预检失败
      return false;
    }
    // 其他错误（如网络问题），直接抛出
    throw err;
  }
}

// 使用方式
validatePutCors('你的资源URI')
  .then(isValid => {
    isValid 
      ? console.log('PUT请求的CORS配置正常')
      : console.error('PUT请求存在CORS问题，请检查服务器配置');
  })
  .catch(err => console.error('CORS检查失败:', err));

原理说明 #

1. 当你发送带自定义头的PUT请求时，浏览器会自动先发送OPTIONS预检，验证服务器是否允许PUT方法和指定的请求头。
2. 我们在发起PUT请求后立刻调用abort()，这样浏览器只会完成预检步骤，不会把PUT的请求体发送到服务器，完全不会修改资源。
3. 如果预检通过，浏览器会尝试发送PUT请求，但因为被中止，会抛出AbortError——这就代表CORS配置没问题；如果预检失败，浏览器会直接抛出CORS相关的TypeError，我们就能据此判断问题。

为什么手动OPTIONS请求行不通？ #

Access-Control-Request-Method、Access-Control-Request-Headers这类头是浏览器预检请求专属的头，你手动发送带这些头的OPTIONS请求时，浏览器会把这个请求判定为非简单请求，进而自动给它再发一层预检。而你的服务器没配置允许OPTIONS方法，所以这层额外的预检直接失败了，和你要验证的PUT请求CORS状态无关。

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