静态单页应用如何无需后端即可解析用户拖拽的第三方URL跨域资源

可行解决方案 #

优先方案：直接读取拖拽附带的文件对象（99%场景可用） #

你当前的痛点核心是拖拽事件处理逻辑只提取了URL类型数据，忽略了Discord拖拽行为默认附带的本地文件对象：
不管是Discord桌面端还是网页版，拖拽附件时都会在拖拽数据中写入本地缓存的完整文件对象，你不需要发送任何网络请求就能直接拿到文件内容，完全符合纯前端、无服务端代理的要求。
参考代码示例：

// 给你的拖拽区域绑定事件
const dropArea = document.getElementById('your-drop-area');

// 必须阻止dragover默认行为，否则drop事件不会触发
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  // 可选：添加拖拽悬停样式
  dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', async (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');

  // 优先读取文件列表，这才是你需要的核心数据
  if (e.dataTransfer.files.length > 0) {
    const targetFile = e.dataTransfer.files[0];
    // 直接传入你现有的文件分析逻辑即可，不需要处理跨域
    analyzeFile(targetFile);
    return;
  }

  // 极端场景下才需要处理URL逻辑
  const discordCdnUrl = e.dataTransfer.getData('text/uri-list');
  if (discordCdnUrl) {
    handleUrlCase(discordCdnUrl);
  }
});

降级方案：极端场景下仅拿到URL的处理方式 #

如果遇到特殊情况确实没有拿到文件对象，可选用以下两种纯前端实现的方案：

• 引导用户快速授权读取：创建隐藏的<a>标签设置href为Discord附件URL、download为对应文件名，触发点击让浏览器下载文件后，调用showOpenFilePicker API让用户选中刚下载的文件，全程无需离开你的站点，用户仅需2次点击确认即可完成。
• 图片类资源的更优替代：如果要分析的是图片类文件，可以提示用户右键复制Discord中的图片后直接粘贴到你的页面，paste事件的剪切板数据中可以直接拿到完整的图片文件对象，完全规避跨域问题。

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