三個js紋理加載。 CORS 政策已阻止從源“null”訪問圖像

Question

我正在嘗試加載紋理，但無論我做什么，我都會收到此錯誤：

Access to Image at '<file-path>/IMG/1.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.

這是我用來加載圖像的代碼：

var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var url = "IMG/1.jpg";
var materials = [
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
];

Answer 1

如果文件是本地文件，則需要運行本地服務器。 這很簡單，只需一分鍾左右。

如果文件不是本地文件，則服務器本身需要授予權限。 默認情況下，像 github pages 這樣的一些服務器會這樣做。 imgur 和 flickr 也是如此。

否則，如果它是您控制的服務器，則需要對其進行配置以授予權限。 每個服務器（apache、nginx、caddy、iis 等）的配置都不同，您需要根據您使用的服務器搜索配置方式。 如果它不是您控制的服務器，那么您需要要求控制它的人對其進行配置以授予 CORS 權限

跨原點圖像不僅僅是設置 crossOrigin 的問題。 所做的只是告訴瀏覽器您要向服務器請求使用該圖像的許可。 實際授予該權限仍然取決於服務器。 大多數服務器默認不授予權限，必須配置為添加該權限。

Answer 2

試試這個： loader.setCrossOrigin('anonymous');

Answer 3

我使用與谷歌瀏覽器不同的瀏覽器修復了它。

我不能使用本地服務器的原因是因為這是一個學校作業。 打算給它評分的人不會運行本地服務器來讓它工作。 他們只是打開它，看到它不起作用並減分。