My domain return error for texture load image url

问题

image does not load by my domain

Other domain no problem. it is working

it just doesn't load my domain

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var map = textureLoader.load('https://MY-DOMAIN.com/upload/01.png');

Error : GET https://MY-DOMAIN.com/upload/01.png net::ERR_FAILED

Note : I'm working on localhost. I taking pictures from remote server

回答1:

From the response header your server sends I can see that it doesn't return a Access-Control-Allow-Origin header. This should either be <origin>or *. So I'm afraid you might have to configure your server properly.

I noticed you you're using LiteSpeed Web Server so have a look at their Wiki page: https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:cors

If I try to serve your image via a proxy everything's fine.

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var map = textureLoader.load('https://api.codetabs.com/v1/proxy?quest=https://zomisoft.com/blog_img/5-5bcf0cae447c36.35706243.png');

回答2:

Other solution i found

Get base64 type picture with web service

Web service

<?php

header("access-control-allow-origin: *");


if($_GET['key']=='1453'){
    try {
$path  = $_GET['url'];

$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

    echo $base64;
    } catch (Exception $e) {
    echo 'Caught exception: ',  $e->getMessage(), "\n";
    }
}else{
    echo 404;
}

three.js

var image = new Image();
image.src = data;//base64 type image from web service

var texture = new THREE.Texture();
texture.image = image;

image.onload = function() {
  texture.needsUpdate = true;
};

var material = new THREE.MeshPhongMaterial({
  map: texture,
});

来源：https://stackoverflow.com/questions/56654798/my-domain-return-error-for-texture-load-image-url