THREE.js GLTFLoader CORS ошибка, как включить CORS?

Question

Здравствуйте, я пытаюсь загрузить модель GLTF с помощью THREE.js GLTFLoader, я получаю сообщение об ошибке CORS (отсутствует доступ к источнику контроля доступа ..) Я также извлекаю из корзины s3 другие ресурсы ивсе работает, кроме GLTF, так что я предполагаю, что мне нужно передать некоторый флаг CORS в GLTFLoader. прямо сейчас:

    this.loader = new THREE.GLTFLoader();
    this.loader.load(avatar_path, gltf => {..})

Edit1: я уже пробовал:

   loader.setCrossOrigin( 'anonymous' ) 

и

   loader.setCrossOrigin( 'use-credentials' ) 

без успеха. всегда одна и та же ошибка CORS.

Answer 1

Вам не нужно ничего устанавливать в three.js. Three.js автоматически запрашивает разрешения CORS, когда это необходимо.

Скорее всего, это конфигурация сервера.

Откройте devtools вашего браузера, перейдите на вкладку сети, перезагрузите страницу, посмотрите запроси ответ для файла .gltf. В «запросе» (из браузера) вы должны увидеть заголовок CORS, а в ответе (из S3) - заголовок «access-control-allow-origin: *». Я предполагаю, что в ответе сервера отсутствует заголовок, что означает, что ваш сервер настроен неправильно.

Просто предположение, но если работают изображения, загруженные в three.js, а не изображения на самой странице, поскольку они не нужныРазрешение CORS), но фактические текстуры, то проблема в том, что ваш S3 настроен на отправку CORS только для определенных типов файлов. Если изображения, использующие текстуру, также не работают, тогда проблема в более базовой конфигурации CORS

Пример:

Answer 2

Сначала вам нужно установить локальный веб-сервер на вашем компьютере, затем вам нужно создать файл .php и записать в него следующий код: <? Заголовок php («Access-Control-Allow-Header: *»)?> и затем включите этот файл в ваш HTML-файл. у меня это сработало ... 100