如何用jQuery/JavaScript验证Google Drive公开链接的可访问性？

你遇到的是**浏览器跨源资源共享（CORS）**限制问题：Google Drive的网页资源没有配置允许你的前端域名跨域访问，所以浏览器会直接拦截fetch请求，抛出跨域错误。

以下是两种可行的解决方案：

方案1：使用后端代理请求 #

前端无法直接跨域访问第三方资源，但后端服务不受浏览器CORS限制。你可以搭建一个简单的后端接口，由后端代为请求Google Drive链接并返回校验结果。

后端示例（Node.js + Express） #

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const cors = require('cors'); // 允许前端跨域访问代理接口

app.use(cors());

app.get('/verify-drive-link', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl) {
    return res.status(400).send({ success: false, message: '缺少目标链接参数' });
  }

  try {
    const response = await fetch(targetUrl, {
      method: 'HEAD', // 使用HEAD请求减少数据传输，仅获取状态码
      redirect: 'follow'
    });
    res.send({
      success: true,
      accessible: response.ok,
      statusCode: response.status
    });
  } catch (error) {
    res.status(500).send({
      success: false,
      accessible: false,
      message: error.message
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`代理服务运行在端口 ${PORT}`));

前端修改后的代码 #

$('#videoCkeck').on('click', function () {
  console.log("check");
  const driveUrl = 'https://drive.google.com/file/d/1AunwLGuDlprNnM8KBIl7zZLLrYISCGFz/view?usp=sharing';
  
  // 请求自己的后端代理接口
  fetch(`/verify-drive-link?url=${encodeURIComponent(driveUrl)}`)
    .then(response => response.json())
    .then(result => {
      if (result.accessible) {
        console.log('链接可正常访问');
      } else {
        console.log('链接不可访问，状态码:', result.statusCode);
      }
    })
    .catch(err => {
      console.log("校验出错", err);
    });
});

方案2：使用Google Drive API校验文件状态 #

通过解析Drive链接中的文件ID，调用Google Drive官方API获取文件元数据，判断文件是否可公开访问。这种方式更精准，但需要配置API密钥。

步骤说明 #

1. 登录Google Cloud控制台，启用Google Drive API
2. 创建API密钥，并配置允许访问的前端域名（防止密钥滥用）
3. 从Drive链接中提取文件ID

前端代码示例 #

// 解析Drive链接中的文件ID
function getDriveFileId(url) {
  const regex = /drive\.google\.com\/file\/d\/([a-zA-Z0-9-_]+)/;
  const match = url.match(regex);
  return match ? match[1] : null;
}

$('#videoCkeck').on('click', function () {
  console.log("check");
  const driveUrl = 'https://drive.google.com/file/d/1AunwLGuDlprNnM8KBIl7zZLLrYISCGFz/view?usp=sharing';
  const fileId = getDriveFileId(driveUrl);
  
  if (!fileId) {
    console.log('无效的Google Drive链接');
    return;
  }

  const API_KEY = '你的Google API密钥'; // 替换为你创建的API密钥
  fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?key=${API_KEY}`)
    .then(response => {
      if (response.ok) {
        console.log('链接可正常访问');
      } else if (response.status === 404) {
        console.log('文件不存在或未设置为公开访问');
      } else {
        console.log('校验失败，状态码:', response.status);
      }
    })
    .catch(err => {
      console.log("校验出错", err);
    });
});

方案对比 #

• 后端代理：无需依赖Google服务，无请求配额限制，但需要维护后端服务
• Google Drive API：能直接获取文件详细状态，结果更准确，但需要配置API密钥，且有免费请求配额限制

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