当尝试从url转换为base64时-在JS中获取CORS问题 [英] When tried to convert to base64 from url - getting CORS Issue in JS

问题描述

当我尝试将图像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或现场示例

解决方案

您面临的CORS问题是因为您试图从另一个域访问www.dropbox.com域.简短的答案是，您不能从自己的域中解决此问题-它需要www.dropbox.com域的合作才能解决此问题.在这种情况下，您是客户端，而dropbox是服务器，因此作为客户端，您无法告诉服务器要使用哪些安全设置.服务器可以选择加入并可以配置其站点以允许您的来源，但这并不是Dropbox可以做到的.您需要重新架构您的方法. (另请参见如何规避原产地政策当我说您需要重新架构您的方法时，请不要相信我.)

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

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

您可以尝试使用JavaScript将脚本标签注入DOM中，从而将脚本标签的类型设置为JavaScript以外的其他类型.然后，您可以让您的代码读取其中的内容并加以利用……但这是一种完全重新设计的方法.请参见 HTML标签如何在脚本标签中起作用?和 https://stackoverflow.com/a/8578840/230055 . >

when i tried to convert image url to base64 am getting CORS issue. Not sure what exactly need to do to get rid of this CORS issue

my code look like this

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)
})

am getting this error

Access to XMLHttpRequest at 'https://www.dropbox.com/****/gradient-test.jpg?dl=1' from origin 'https://stackoverflow.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.**

and am not able to console ,since CORS issue.

Can any guys help me to get rid with an jsfiddle or an live example

解决方案

The CORS issue you are facing is because you are trying to access the www.dropbox.com domain from a different domain. The short answer is that you can't fix this from your own domain--it requires cooperation from the www.dropbox.com domain to fix this. You are the client in this case, and dropbox is the server, so as a client you can't tell the server what security settings to use. The server can opt in and could configure their site to allow your origin, but that isn't something dropbox is likely to do. You'll need to re-architect your approach. (also see Ways to circumvent the same-origin policy if you don't believe me when I say you need to re-architect your approach.)

Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more background:

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.

You could try using JavaScript to inject a script tag into your DOM that sets the type of the script tag to something other than JavaScript. Then you could have your code read the contents of that and make use of it...but that is a completely re-architected approach. See How does HTML tags work inside script tag? and https://stackoverflow.com/a/8578840/230055 if you want to look into that.

这篇关于当尝试从url转换为base64时-在JS中获取CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！