CORS：PHP绕过不起作用

Posted 2023-03-04

【中文标题】CORS：PHP绕过不起作用

【英文标题】：CORS: PHP bypass not working

【发布时间】：2014-02-09 19:26:05

【问题描述】：

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

来自 Chrome 扩展的跨域

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

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

“权限”：[“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对象（将crossOrigin设置为Anonymous）的src属性，该对象用于将图像绘制到画布上并设置其宽度和高度属性。

结果

    预期结果是加载和处理每张图片而不会引发 Cross-origin image load denied by Cross-Origin Resource Sharing policy 错误，然而现在似乎每张图片都被提供没有所需的 @987654342 @ headers 削弱了我的扩展。我检查了本地主机上处理此请求发送的页面的标题，它似乎没问题。 (screenshot)

结论

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

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

【参考方案1】：

如果你的图片 src 是一个数据 uri（base64 编码的图片数据），那么就没有头文件来设置访问控制。

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

【讨论】：

你似乎误会了我，我将 image url 传递给服务器，然后它发回 data uri

我相信它反过来（你误解了我）。做img.src = 'http://localhost/dim-service/?url=https%3Aetc';

对不起，我的错。我修改了脚本，所以 php 只返回 data_uri，我将 img.src 设置为响应，它仍然给我错误。