从本地服务器加载图像时"No 'Access-Control-Allow-Origin' header is present on the requested resource"？

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

允许 - 原始 - 通常意味着您仅允许您加载与所在域相同域中的资源。因此，如果要加载" Localhost"资源，则需要在Localhost。但是，在这种情况下，问题可能只是您尝试从无法访问该本地资源的远程服务器加载本地主机资源。

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

(。

我希望这会有所帮助

Answer 2

如果图像是从不同域加载的，当图像资源通过JavaScript(编辑等(操纵时，则应用相同的原点策略。

在此问题的情况下，HTML是从本地文件系统加载的(Origin是null(，但图像是从http://localhost:8080加载的。因此，当使用Pixi.js来操纵图像(读取图像数据并将其作为纹理存储(时，浏览器将报告错误，因为http://localhost:8080不支持CORS。

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

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