纹理加载图像 url 的域返回错误答案

【问题标题】：My domain return error for texture load image url纹理加载图像 url 的域返回错误
【发布时间】：2019-06-20 21:32:13
【问题描述】：

图片未由我的域加载

其他域没问题。它正在工作

它只是不加载我的域

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

错误： GET https://MY-DOMAIN.com/upload/01.png net::ERR_FAILED

注意：我正在使用本地主机。我从远程服务器拍照

【问题讨论】：

服务器的SSL证书好像有问题。
我怀疑是证书，但找不到任何东西。我的服务器也可能是问题？
我只能看到浏览器告诉我的信息 - 如果 my-domain.com 是您的域，它会显示“证书无效”。
我没有共享我的域。我写了一个示例域。我的域没有 ssl 问题
那么您尝试加载的图片的实际网址是什么？

标签： javascript three.js webgl

【解决方案1】：

从您的服务器发送的响应标头中，我可以看到它没有返回 Access-Control-Allow-Origin 标头。这应该是 <origin> 或 *。所以恐怕您可能需要正确配置您的服务器。

我注意到您正在使用 LiteSpeed Web 服务器，因此请查看他们的 Wiki 页面：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:cors

如果我尝试通过代理提供您的图片，一切都很好。

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】：

我找到的其他解决方案

通过web服务获取base64类型图片

网络服务

<?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;
}

三个.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,
});

【讨论】：