个人中心
gpt4 book ai didi

JavaScript 图像被 CORS 阻止

转载 作者：行者123 更新时间：2023-11-28 05:13:06 25 4
gpt4 key购买 nike

下面的代码由一个 HTML 选项卡和一个模式组成我在下面所做的是我使用库 HTML2Canvas 来捕获选定的 divs。但问题是当我点击下载时，它没有捕捉到我下载文件中的图像。

它一直出现此错误 从来源 'http://localhost' 访问位于 '//IMAGE LINK' 的图像已被 CORS 策略阻止:不存在 'Access-Control-Allow-Origin' header 在请求的资源上。因此不允许访问源“http://localhost”。

我已经尝试将 crossorigin:anonymous 添加到我的 img 中，但仍然没有成功。有解决这个问题的简单方法吗？任何帮助将不胜感激。

function sendData() {


  $('#myModal2').addClass('modal-posit');

  var modalButton = $('[data-target="#myModal2"]')[0];
  modalButton.click();
  var modal = $('#myModal2')[0];
  


  setTimeout(function() {
    html2canvas(document.getElementById('capture'), {
      allowTaint: false,
      useCORS: true
    }).then(function(canvas) {
        downloadCanvas(document.getElementById('test'), canvas, 'test.png');
        modalButton.click();
    });
  }, 1000);
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

function downloadCanvas(link, canvas, filename) {
    link.href = canvas.toDataURL();
    link.download = filename;
    link.click();
}

document.getElementById("defaultOpen").click();
body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 8px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 25px;
  border: 1px solid #ccc;
  border-top: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: white;
}

.jobs-panel {
  display: table;
  max-height: 100%;
  width: 85%;
  background-color: #b7bcbe;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.tabwidth {
  width: 85%;
  margin: 0 auto;
}
.modal-posit{
  position: relative;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>

<head>
    <meta charset="utf-8" />
    <style>


    </style>
    <link rel="shortcut icon" href="//#" />
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
    <div id="capture">
    

      <div class="jobs-panel">
  
        <button class="modal-button" data-toggle="modal" data-target="#myModal2">MODAL BUTTON</button>
  
        <div class="tabwidth">
          <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'Graph')" id="defaultOpen">Graph</button>
          </div>
  
          <div id="Graph" class="tabcontent">
            <img src="https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png" width="300" height="300" >
          </div>
  
          <div id="Paris" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
          </div>
  
          <div id="Tokyo" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
          </div>
        </div>
      </div>
      <div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h2 class="modal-title center">FAQ</h2>
            </div>
            <div class="modal-body">
              <div class="central">
                <h3 class="bold-text ">QUESTIONS
                </h3>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <button id="match-button" onclick="sendData();">capture</button>
    <a id="test" href="#"></a>
  </body>
</html>

<script>

</script>

最佳答案

图像的 CORS 权限需要同时服务器和浏览器来做一些事情。

首先浏览器必须请求 CORS 权限。

您可以通过在图像上设置 crossOrigin 来做到这一点。示例

const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://somesite.com/someimage.jpg"

请注意 crossOrigin 有 3 个有效值。

  1. 未定义

    这意味着浏览器不会请求 CORS 权限并且不会检查 header 。即使服务器发送了 header ，如果图像来自另一个域，您仍然会收到安全错误，具体取决于您尝试对图像执行的操作。这是默认设置。

  2. '使用凭证'

    这意味着浏览器将向服务器发送额外信息(cookie 等)，以便它可以用来决定是否授予权限。

  3. 还有什么

    您可以输入“”或“匿名”或“foobarmoo”或任何内容。如果它不是未定义的，也不是“使用凭据”，那么它就是第三个版本。这意味着在没有任何额外信息的情况下请求一揽子 CORS 许可。

其次，服务器必须发送正确的 header 。

如果您控制服务器，则需要将其配置为发送正确的 header 。每个服务器都是不同的(apache、nginx、caddy 等)。每个服务器都是不同的，如果您想知道如何配置该特定服务器，您应该在该服务器的文档中查找它或询问该服务器的特定问题。

大多数服务器默认不发送 CORS header 。此外，大多数第 3 方站点不发送图像的 CORS header 。 3 个异常(exception)是 imgur、github pages 和 flickr(遗憾的是至少截至 2018 年 7 月还没有 stack.imgur)。如果您试图从网络上的随机服务器访问图像，那么您只能联系他们的客户支持并要求他们添加 header ，否则您就不走运了。

在您的情况下，您正在访问 AWS 上的图像。 AWS 上的服务器未发送 CORS header 。您的解决方案是 (a) reconfigure AWS to send CORS headers如果您可以控制那里的服务器 (b) 要求控制该服务器的人添加 CORS header (c) 意识到如果没有 (a) 或 (b)，您将无法做您想做的事。

这是一个演示:我们将尝试加载您的图像，一个图像来自 imgur(它确实设置了 cors header )和另一个 imgur 但未设置 crossOrigin 以显示 BOTH 设置 crossOrigin AND 需要接收 cors header 。

loadAndDrawImage("https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png", "anonymous");
loadAndDrawImage("https://i.imgur.com/fRdrkI1.jpg", "anonymous");
loadAndDrawImage("https://i.imgur.com/Vn68XJQ.jpg");

function loadAndDrawImage(url, crossOrigin) {
  const img = new Image();
  img.onload = function() { 
    log("For image", crossOrigin !== undefined ? "WITH" : "without", "crossOrigin set:", url);
    try {
      const ctx = document.createElement("canvas").getContext("2d");
      ctx.drawImage(img, 0, 0);
      ctx.getImageData(0, 0, 1, 1);
      success("canvas still clean:", url);
    } catch (e) {
      error(e, ":", name);
    }
    log(" ");
  };
  img.onerror = function(e) {
    error("could not download image:", url);
    log(" ");
  };
  if (crossOrigin !== undefined) {
    img.crossOrigin = crossOrigin;
  }
  img.src = url;
}

function logImpl(color, ...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(" ");
  elem.style.color = color;
  document.body.appendChild(elem);
}

function log(...args) {
  logImpl("black", ...args);
}

function success(...args) {
  logImpl("green", ...args);
}

function error(...args) {
  logImpl("red", ...args);
}
pre { margin: 0; }
<pre>check headers in devtools

</pre>

PS:还有另一种解决方案，但可以说是粗略的。您可以运行代理服务器，从 AWS 下载图像，然后将其发送到添加了 CORS header 的页面(或从与页面相同的域发送)。我怀疑这就是您正在寻找的解决方案。

关于JavaScript 图像被 CORS 阻止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51470791/

25 4 0
文章推荐： javascript 使用悬停来改变颜色
文章推荐： c++ - Clang 工具预处理源文件
文章推荐： c++ - 完整模板特化错误
文章推荐： javascript - 对所有可能的子属性的访问器进行原型(prototype)设计
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com