javascript - CORS:PHP 绕过不起作用

Question

我正在开发一个 Chrome 扩展程序，它的一部分是使用 canvas 处理页面上的图像的功能。及其 context.getImageData功能。那是我遇到CORS的时候问题。据我了解，提供图像的服务器必须使用适当的 CORS 为所述图像提供服务。 header ，以便跨域请求成功。我开始阅读这项(对我来说)陌生的新技术 ( tutorial )。大量服务器不使用 CORS 每个 图像都得到处理，这对我的扩展程序的功能非常重要。我花了一整天的时间尝试使用客户端脚本来规避这个问题，但得出的结论是，唯一的方法是将图像 url 发送到服务器，然后根据需要将其返回CORS header (Access-Control-Allow-Origin: *)。现在，在开始解释我的实现之前，我想引用我之前链接的教程页面中的一段话。

Cross-Domain from Chrome Extensions

Chrome extensions support cross-domain requests in a two different ways:

Include domain in manifest.json - Chrome extensions can make cross-domain requests to any domain if the domain is included in the "permissions" section of the manifest.json file:

"permissions": [ "http://*.html5rocks.com"]

服务器不需要包含任何额外的 CORS header 或做任何更多的工作来使请求成功。

这应该意味着 "permissions": "<all_urls>"应该规避同源策略限制。但是，这不起作用。

我的解决方案

一个 XMLHttpRequest将图像 url 和回调函数传递给本地主机上的服务器(用于测试目的)，它首先设置适当的 header :

header('Access-Control-Allow-Origin: *'); ,

然后打印 JSON包含图像宽度、高度和使用 file_get_contents 的编码数组, imagecreatefromstring , 和 base64_encode , 相当于 context.getImageData以及对回调函数的调用。

回调函数设置 Image 的 src 属性用于将图像绘制到 Canvas 上并设置其宽度和高度属性的对象(将 crossOrigin 设置为 Anonymous )。

结果

预期的结果是在不引发 Cross-origin image load denied by Cross-Origin Resource Sharing policy 的情况下加载和处理每张图像。错误，但是现在每张图片似乎都没有所需的CORS标题削弱了我的扩展。我检查了处理此请求发送的本地主机上页面的 header ，似乎没问题。 ( screenshot )

结论

我对这个解决方案的实现似乎应该有效，但我真的不知道为什么无效。服务器正在发送 Access-Control-Allow-Origin header，图像数据良好，调用回调函数。这是发布前唯一需要解决的问题。这真是一个耐人寻味的问题。我意识到我发送的 header 不是我可能想要发送的唯一 header ，但它足以用于测试目的。

我希望这个问题很清楚，并且足够详细，以便有人可以帮助我解决这个问题。请不要犹豫，索取更多信息和/或代码片段，因为为了保持简洁，我并没有真正包含任何代码。

Answer 1

如果你的图片src是data uri(base64编码的图片数据)，那么就没有headers来设置访问控制。

只需将图像源设置为您在 ajax 中调用的 url 并发回未编码的图像(echo file_get_contents)。