Firefox 不允许我发布带有跨源图像的表单

Question

在我的网页上，我有一个拖放图像字段，它将与其他表单数据一起发布到我的后端。 （复制粘贴图像也可以）但是，这里是我的问题的总结和一些示例：

• Chrome：从桌面复制的图像，有效。
• Chrome：从任何其他网站复制的图像，比如说从 Google 图片，有效。
• Firefox：从桌面复制的图像，有效。
• Firefox，从任何其他网站复制的图像，比如说从 Google 图片，不起作用。

如果我从表单数据中排除图像，那么它也可以在 Firefox 中使用。

通过图像，在我的后端，我什至看不到我的“已收到请求”日志。在网络选项卡中，如果我调查请求，标头和有效负载看起来是空的。事实上，一切看起来都是空的，并且它不会在我的后端触发任何内容。

另一个奇怪的事情是，我在另一个组件中有类似的功能，但我可以通过 firefox 发布跨源图像，我没有问题。但在这个特定的 React 组件中我遇到了这个问题。当我比较控制台上发布的文件时，它们实际上是相同的。我知道它看起来信息太多，但现在我无法确定是什么导致了这个问题，我已经做了很多检查，但无法弄清楚是什么导致了这个问题。

最后， 如果 CORS 是问题所在，我为什么可以在此 React 应用程序的另一个页面中发布完全相同的跨源图像？ 如果它与 React/我的代码有关，为什么它在 Chrome 上完美运行而不是在 Firefox 上运行？

Answer 1

这是一个工作示例。通过测试（仅在 Firefox 中），我可以看到，当我从某个随机网站拖动图像时，fetch() 函数不会在响应中返回 blob。正如您所建议的，这可能是由于 CORS 问题造成的。显然，以下使用 XMLHttpRequest 的示例效果很好。

不知道你是否使用了一些JavaScript库？也许该库使用了 fetch API。

const form = document.forms.form01;

form.addEventListener('dragover', e => {
  e.preventDefault();
});

form.addEventListener('drop', e => {
  e.preventDefault();
  if (!e.dataTransfer.files.length) {
    let url = e.dataTransfer.getData('text/plain');
    let xhr = new XMLHttpRequest();
    xhr.addEventListener('load', e => {
      let file = new File([e.target.response], "img.jpg", {
        type: xhr.response.type
      });
      let transfer = new DataTransfer();
      transfer.items.add(file);
      form.img.files = transfer.files;
    });
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  } else {
    form.img.files = e.dataTransfer.files;
  }
});

form.addEventListener('submit', e => {
  //e.preventDefault();
  //let data = new FormData(e.target);
  //console.log([...data]);
});

<form name="form01" method="POST" enctype="multipart/form-data">
  <input type="file" accept="image/jpeg, image/png" name="img" />
  <div>Drop here</div>
  <button>Submit</button>
</form>