CORS：PHP绕过不起作用

Question

我正在使用Chrome扩展程序部分，该部分是使用canvas及其context.getImageData功能处理页面上图像的功能。那时我遇到了CORS个问题。我的理解是，服务于图像的服务器必须使用适当的CORS标头为所述图像服务，以便跨域请求成功。我开始阅读（对我而言）新的和不熟悉的技术（tutorial）。大量服务器不使用CORS，对于我的扩展功能而言，处理每个图像非常重要。我花了一整天时间尝试使用客户端脚本来绕过这个问题，但得出的结论是，唯一的方法是将图像URL发送到服务器，然后将其提供回 所需的CORS标题（Access-Control-Allow-Origin: *）。在我开始解释我的实现之前，我想引用我之前链接的教程页面中的段落。

  

Chrome扩展程序中的跨域

     

Chrome扩展程序以两种不同的方式支持跨域请求：

     

在manifest.json中包含域名 - 如果域名包含在manifest.json文件的“权限”部分中，则Chrome扩展程序可以向任何域发出跨域请求：

     

    

“权限”：[“http：//*.html5rocks.com”]

  

     

服务器不需要包含任何其他CORS标头，也不需要做更多工作，以使请求成功。

这应该意味着"permissions": "<all_urls>"应绕过相同的原始政策限制。但是，这不起作用。

我的解决方案

XMLHttpRequest将图片网址和回调函数传递给localhost上的服务器（用于测试目的），该服务器首先设置相应的标头：

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

然后打印一个包含图像宽度，高度的JSON编码数组，并使用file_get_contents，imagecreatefromstring和base64_encode，相当于context.getImageData和调用回调函数。

回调函数设置Image对象（crossOrigin设置为Anonymous）的src属性，该对象用于将图像绘制到画布上并设置其宽度和高度属性。

结果

预期的结果是每个图片都要加载和处理而不会引发Cross-origin image load denied by Cross-Origin Resource Sharing policy错误，然而现在每个图片似乎都是没有所需的CORS标题严重影响了我的扩展程序。我检查了localhost上的页面的头文件，它处理了这个请求发送，似乎没问题。 （ screenshot ）

结论

我对此解决方案的实现似乎它应该工作，我真的不知道它为什么没有。服务器正在发送Access-Control-Allow-Origin标头，图像数据良好，并且调用回调函数。这是发布前唯一要解决的问题。这是一个非常有趣的问题。我意识到我发送的标头并不是我唯一想要发送的标题，但它足以用于测试目的。

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

Answer 1

如果您的图像src是数据uri（base64编码图像数据），则没有标头来设置访问控制。

只需将图片来源设置为您在ajax中调用的网址，然后发回未编码的图片（echo file_get_contents）。