我正在开发Chrome扩展程序，其中一部分是使用canvas及其context.getImageData函数操作页面上图像的功能。就在那时，我遇到了CORS问题。据我了解，为图像提供服务的服务器必须使用适当的CORS标头服务器所述图像，以便跨域请求成功。我开始阅读这个(对我来说)新的和不熟悉的技术(教程)。大量服务器不使用CORS处理每个图像对于我的扩展的功能非常重要。我花了一整天的时间试图使用客户端脚本来规避这个问题，但得出的结论是，唯一的方法是将图像 url 发送到服务器，然后将其与所需的CORS标头一起提供(Access-Control-Allow-Origin: *)。现在，在我开始解释我的实现之前，我想引用我之前链接的教程页面中的一段话。
来自 Chrome 扩展程序的跨域
Chrome 扩展程序支持跨网域请求的方式有两种不同方式：
在 manifest.json 中包含域 - 如果 manifest.json 文件的"权限"部分包含域，Chrome扩展程序可以向任何域发出跨域请求：
"权限"： [ "http：//*.html5rocks.com"]
服务器不需要包含任何其他 CORS 标头或执行任何其他工作即可使请求成功。
这应该意味着"permissions": "<all_urls>"应该规避同源政策限制。但是，这不起作用。
我的解决方案
XMLHttpRequest将图像 url 和回调函数传递给 localhost 上的服务器(用于测试目的)，该服务器首先设置适当的标头：
header('Access-Control-Allow-Origin: *');，
然后打印一个包含图像宽度、高度的JSON编码数组，并使用file_get_contents、imagecreatefromstring和base64_encode(相当于context.getImageData和对回调函数的调用)。
回调函数设置Image对象的 src 属性(crossOrigin设置为Anonymous)，该对象用于将图像绘制到画布上并设置其宽度和高度属性。
结果
预期的结果是加载和处理每个图像而不会引发Cross-origin image load denied by Cross-Origin Resource Sharing policy错误，但是现在似乎每个图像都没有得到所需的CORS标头，从而削弱了我的扩展。我检查了本地主机上处理此请求发送的页面的标题，似乎还可以。(截图)
结论
我对这个解决方案的实现似乎应该有效，我真的不知道为什么它不能。服务器发送Access-Control-Allow-Origin标头，图像数据良好，调用回调函数。这是发布前唯一需要解决的问题。这是一个非常有趣的问题。我意识到我发送的标头不是我可能想要发送的唯一标头，但它足以用于测试目的。
我希望这个问题是清楚的，并且足够详细，有人可以帮助我解决这个问题。请不要犹豫，询问更多信息和/或代码片段，因为我并没有真正包含任何代码来保持简洁。
如果图像 src 是数据 URI(base64 编码的图像数据)，则没有用于设置访问控制的标头。
只需将图像源设置为您在 ajax 中调用的 url 并发回未编码的图像(echo file_get_contents)。