当尝试从 url 转换为 base64 时 - 在 JS 中出现 CORS 问题答案

【问题标题】：When tried to convert to base64 from url - getting CORS Issue in JS当尝试从 url 转换为 base64 时 - 在 JS 中出现 CORS 问题
【发布时间】：2020-11-06 08:18:22
【问题描述】：

当我尝试将图像 url 转换为 base64 时，我遇到了 CORS 问题。不知道究竟需要做什么来摆脱这个 CORS 问题

我的代码是这样的

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.dropbox.com/******/gradient-test.jpg?dl=1', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

收到此错误

从源“https://stackoverflow.com”访问“https://www.dropbox.com/****/gradient-test.jpg?dl=1”处的 XMLHttpRequest ' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。**

由于 CORS 问题，我无法控制台。

谁能帮我摆脱一个 jsfiddle 或一个活生生的例子

【问题讨论】：

标签： javascript jquery cors cross-domain cross-platform

【解决方案1】：

您面临的 CORS 问题是因为您试图从不同的域访问 www.dropbox.com 域。简短的回答是，您无法从自己的域中解决此问题——它需要www.dropbox.com 域的合作才能解决此问题。在这种情况下，您是客户端，而 dropbox 是服务器，因此作为客户端，您无法告诉服务器要使用哪些安全设置。服务器可以选择加入并可以将其站点配置为允许您的来源，但这不是 Dropbox 可能做的事情。您需要重新设计您的方法。（当我说你需要重新设计你的方法时，如果你不相信我，也请参阅Ways to circumvent the same-origin policy。）

查看https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 了解更多背景信息：

出于安全原因，浏览器会限制跨域 HTTP 请求从脚本启动。例如，XMLHttpRequest 和 Fetch API 遵循同源政策。这意味着一个 Web 应用程序使用这些 API 只能从同一来源请求资源除非来自其他来源的响应，否则加载应用程序包括正确的 CORS 标头。

您可以尝试使用 JavaScript 将脚本标签注入到您的 DOM 中，将脚本标签的类型设置为 JavaScript 以外的其他内容。然后你可以让你的代码读取它的内容并使用它......但这是一种完全重新架构的方法。如果您想对此进行调查，请参阅 How does HTML tags work inside script tag? 和 https://stackoverflow.com/a/8578840/230055。

【讨论】：