为什么 cross-origin 图片请求被 Cytoscape.js 而不是 d3.js 阻止？

Question

尽管 Cytoscape.js 支持节点中的背景图像，但我无法显示没有 CORS (Cross-Origin-Resource-Sharing) header 的图像。 Chrome 抛出以下错误。

Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我要访问的图像 -

但是，如果我尝试使用 d3.js 在节点中显示与背景相同的图像，则会显示该图像。

Cytoscape.js

var cy;
window.addEventListener('DOMContentLoaded', function() {

  cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .css({
        'height': 60,
        'width': 60,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 1,
        'label': 'data(label)'
      })
      .selector('edge')
      .css({
        'width': 2,
        'line-color': '#ffaaaa',
        'target-arrow-color': '#ffaaaa',
        'curve-style': 'bezier',
      })
      .selector('#puppy')
      .css({
        'background-image': 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
      })
      .selector('#cat')
      .css({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'cat',
            label: 'Images are supported'
          }
        },
        {
          data: {
            id: 'puppy',
            label: 'Desired image not being shown'
          }
        },
      ],
      edges: [{
        data: {
          source: 'cat',
          target: 'puppy',
          label: 'puppy'
        }
      }]
    },
    layout: {
      name: 'circle'
    }
  }); // cy init


});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 70%;
  width: 100%;
  position: absolute;
  left: 100;
  top: 100;
}

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by maxkfranz (http://jsbin.com/teworah/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
  <meta name="robots" content="noindex">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

</head>

<body>

  <div id="cy"></div>

</body>

d3.js

var config = {
  "avatar_size": 100
}

var body = d3.select("body");

var svg = body.append("svg")
  .attr("width", 500)
  .attr("height", 500);

var defs = svg.append('svg:defs');

data = [{
  posx: 100,
  posy: 100,
  img: "https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg",
}];


svg.append('clipPath')
  .attr('id', 'clipObj')
  .append('circle')
  .attr('cx', config.avatar_size)
  .attr('cy', config.avatar_size)
  .attr('r', config.avatar_size);

data.forEach(function(d, i) {
  svg.append('image')
    .attr('xlink:href', d.img)
    .attr('width', config.avatar_size)
    .attr('height', config.avatar_size)
    .attr('transform', 'translate(' + parseInt(d.posx + config.avatar_size / 2) + ',' + parseInt(d.posy + config.avatar_size / 2) + ')')
    .attr('clip-path', 'url(#clipObj)');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>

Answer 1

在您的具体示例中，如果将 crossOrigin 设置为 anonymous 它不起作用，但如果您不设置它（即 null），则它有效。

默认情况下 Cytoscape.js 将图像的 crossOrigin 字段设置为 anonymous see the doc。无法将其设置为 null.

但如果您仍然想要，可以使用源代码：将 crossOrigin 字段设置为 null here 将显示此特定图像。

在此JsFiddle中，如果将原点设置为null，则可以，但将其设置为anonymous，则无效。

P.S：如果需要，您还可以运行您的代码片段并在开发人员工具的“网络”选项卡中分析响应和请求 header。在 Firefox 中，您可以编辑 header、重新发送请求，并查看它如何影响响应。

为什么 cross-origin 图片请求被 Cytoscape.js 而不是 d3.js 阻止？

Why are cross-origin Image requests blocked by Cytoscape.js but not by d3.js?

d3.js

cytoscape.js