Ошибка CORS при загрузке изображения с другого сервера внутри тега a-sky

Я пытаюсь использовать текстуру с моего собственного веб-сервера, но помещая ее в тег asset-item, я получаю следующую ошибку.

> Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin
> 'http://localhost' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost' is therefore not allowed access.

Картина доступна, так как я вижу ее в вебинспекторе. Он отлично работает в простой тег изображения. Кто-нибудь знает, что здесь делать? Спасибо!

Обновление: мой код вы можете найти ниже:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene>
  <a-assets>
    <img id="cat" src="http://192.168.x.x:3000/cat.jpg"/>
  </a-assets>

  <a-sky src="#cat"/> <!-- this code works not (CORS) -->
  <a-sky src="http://192.168.x.x:3000/cat.jpg" /> <!-- this code works not (CORS) -->
</a-scene>

<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/> <!-- this code works -->

Решение:

Я выяснил основную проблему: это не имело никакого отношения к самому A-Frame, это была незначительная ошибка на сервере. Заголовки были указаны после инициализации файлового сервера. Ввод спецификации в фазу инициализации сделал свое дело... конечно...:-D

Источник

1 ответ

Решение

Что такое CORS?

Это не A-frame или Three.js или WebVR, которые являются проблемой. CORS (передача ресурсов из России) происходит, когда JavaScript (в вашей ситуации этот скрипт https://aframe.io/releases/0.5.0/aframe.min.js) создает междоменный XHR (X ML H ttp R equest) вызов (в вашей ситуации это на http://192.168.x.x:3000/cat.jpg).

В Википедии я нашел изображение, которое дает больше информации о рабочем процессе CORS.

Рабочий процесс CORS

Ваш запрос является GET-запросом, есть пользовательские заголовки HTTP и не добавлен Acces-Control-* заголовки, приведите ошибку. Более подробную информацию о CORS я нашел в сети разработчиков Mozilla.

Документация от A-frame

Почему мой ресурс (например, изображение, видео, модель) не загружается?

Во-первых, если вы занимаетесь локальной разработкой, убедитесь, что вы используете локальный сервер, чтобы запросы ресурсов работали правильно.

Если вы загружаете ресурс из другого домена (и того, что вы делаете), убедитесь, что ресурс обслуживается заголовками общего доступа к ресурсам (CORS). Вы можете найти хост для обслуживания ресурса с заголовками CORS или разместить ресурс в том же домене (каталоге), что и ваше приложение.

Почему это случилось? 1

Похоже, что скрипт ( https://aframe.io/releases/0.5.0/aframe.min.js), который нужно добавить, загружает изображения и поэтому <a-sky src="http://192.168.0.253:457/cat.jpg" /> не работает вообще. Потому что изображение загружается из скрипта, который размещен на A-frame.

Если вы используете <a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets> URL изображения привязан к a-sky s src атрибута по. И снова изображение загружается из скрипта на сервер A-frames и выполняет междоменный вызов XHR.

1 Я не уверен на 100%, но есть большая вероятность, что это правильно. Если кто-то считает, что это не правильно, скажите, пожалуйста. Если это правильно, пожалуйста, скажите это тоже.

Решения

  1. Поместите файл на ваш локальный веб-сервер.
  2. Добавьте заголовок ответа Access-Control-Allow-Origin когда изображение запрашивается. Я думаю, значение должно быть http://aframe.io,
Источник

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

Несмотря на то, что следующий код - не самое элегантное решение, у меня он работает.

<!DOCTYPE html>
<html>
<head>
    <title>

    </title>
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>

    <a-scene>
        <a-assets>
            <img id="frodo" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/http://i.dailymail.co.uk/i/pix/2011/01/07/article-1345149-0CAE5C22000005DC-607_468x502.jpg">
        </a-assets>
        <!-- Using the asset management system. -->
        <a-image  src="#frodo"></a-image>

    </a-scene>

</body>
</html>

Используя CORS Proxy, добавляет все заголовки, необходимые для выполнения запроса на удаленный сервер и сбора объектов в поле src.

Обратите внимание, что запрос src: https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>

Источник
Другие вопросы по тегам