Запрещена загрузка исходного изображения с помощью Three.js в Chrome - PullRequest
Новая
       19

Запрещена загрузка исходного изображения с помощью Three.js в Chrome

20 голосов
/ 05 ноября 2011

Попытка добавить материал в THREE.js вот так 

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

Он отлично работает в Chrome, IE, FF до 3 дней назад, после того как Chrome обновился до последней версии dev 17.

Chrome 17 просто не загружает изображение и жалуется на следующее 

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Это безумие, поскольку изображение явно находится в том же домене, так что это проблема chrome или THREE.js иличто-то еще?

Ответы [ 7 ]

13 голосов
/ 11 апреля 2012

Если вы запускаете Chrome с локального хоста и используете Three.js, вам, вероятно, нужно запустить Chrome с этим флагом командной строки: 

c:// ... /chrome.exe --allow-file-access-from-files
12 голосов
/ 05 ноября 2011

https://github.com/mrdoob/three.js/issues/687 относится к проблеме на GitHub three.js, в которой есть хороший список обходных путей, включая ссылку на вики-страницу, описывающую, как запускать локально .Есть также некоторые другие обходные пути в потоке, включая добавление следующего к вашим сценариям: 

THREE.ImageUtils.crossOrigin = "";

Или добавление заголовков CORS, чтобы они были специально разрешены.

Обратите внимание, что большая часть этой информации была добавлена ​​из уже существующей ссылки на проблему, которая не была включена первоначальным автором этого ответа.

7 голосов
/ 17 июня 2013

Если вы:

  • не хотите настраивать собственный сервер и
  • не хотите понизить безопасность вашего браузера

затем я разработал способ обойти это, что требует лишь немного усилий:

  1. Преобразование изображения в текст Base64
  2. Сохранение его во внешнем файле Javascript
  3. Ссылка на страницу вашего проекта
  4. Загрузите ее в свою текстуру

Полную информацию можно найти на http://tp69.wordpress.com/2013/06/17/cors-bypass/ для тех, кто заинтересован.

2 голосов
/ 09 декабря 2016

Вы также можете запустить простой HTTP-сервер, используя python, выполнив следующую команду из корневой папки. 

python -m SimpleHTTPServer 8000
1 голос
/ 17 мая 2018

1) Ярлык Chrome -> Свойства -> вкладка Ярлык -> Цель и add - наконец-то разрешить-file-access-from-files в цели. (убейте все задачи Chrome, прежде чем делать это.)

OR

2) Загрузка веб-сервера Mongoose программного обеспечения. Поместите это в свой рабочий каталог, и запустить его. Он откроется в браузере http://localhost:PORT, где он будет обслуживать все ваши файлы.

OR

3) Вы также можете использовать NodeJS сервер в своем приложении.

0 голосов
/ 20 сентября 2016

Идеальное решение для:

THREE.js: загрузка исходного изображения запрещена

Просто добавьте метку времени к URL-адресу изображения.Я не знаю логики, стоящей за этим, но это работает.

Пример: 

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});
0 голосов
/ 29 декабря 2014

это сработало для меня в командной строке \ терминал: 

./chrome.exe --disable-web-security

* обратите внимание, что вы должны закрыть все экземпляры Chrome перед выполнением команды, чтобы он работал.

...