Question

我正在尝试使用pixi.js库从本地主机服务器加载一个简单的测试图像，但加载图像会导致此错误：

Access to Image at
'http://localhost:8080/local_files/assests/images/test_image.jpg' from origin 'null'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource. Origin 'null' is therefore not allowed access.

加载图片的代码：

//load test image 
var texture = PIXI.Texture.fromImage("http://localhost:8080/local_files/assests/images/test_image.jpg");

Answer 1

Allow-origin - 通常意味着您只能加载与您所在域相同的资源。因此，如果要加载“localhost”资源，则需要位于localhost。然而，在这种情况下，问题可能只是您尝试从无法访问该本地资源的远程服务器加载本地主机资源。

您需要记住在远程服务器中使用图像。如果可能，为每个资源（图像，js文件等）使用相同的域。对于静态资源，最简单的做法是使用关系路径而不是绝对路径（“./ images / image.png”而不是“http://localhost/images/image.png”）。

我希望这会有所帮助

Answer 2

如果从不同的域加载图像，当通过JavaScript（编辑等）操纵图像资源时，将应用Same Origin Policy。

在这个问题中，HTML是从本地文件系统加载的（Origin是null），但图像是从http://localhost:8080加载的。因此，当pixi.js用于处理图像（读取图像数据并将其存储为纹理）时，浏览器将报告错误，因为http://localhost:8080不支持CORS。

要解决此问题，有两种方法：

在http://localhost:8080上部署HTML文件并从那里加载。
在http://localhost:8080中启用CORS。

“从本地服务器加载映像时，”请求的资源上没有'Access-Control-Allow-Origin'标头“？

2 个答案: