Clever Geek Handbook

SecurityError for image of the same origin texImage2D

I am currently learning WebGL. When texImage2D is called, which is called when the texture has finished loading, I get this SecurityError

:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded.

However, the file is on the same domain, in fact it is in the same directory as the html file requesting it.

Here is a mock file:

> js
|-> script.js
|-> glUtils.js
|-> sylvester.js
> texture.png
> index.html

And when I look in the resource list of the F12 console, the image texture.png

is there, fully loaded, and it is 256 x 256. Why does it think I am requesting from a different domain?

+3


source to share


2 answers


The solution is that you must be on a local web server because files: /// domain requests will not be provided. (Information provided by Pointy:



If you are serving stuff from a local web server, it will work because the browser will see that they belong to the same domain. Chrome uses command line option: --allow-file-access-from-files, but I don't know if it works yet

+3


source


You are probably getting the error because you are using a url file://

.

The solution is to use a simple web server. Open terminal and type

python -m SimpleHTTPServer


then go to http://localhost:8000

(install python if you are on windows) or use node.js or maybe even better use devd

DO NOT use --allow-file-access-from-files

. This opens your machine to hacking through the browser. It will be like turning off your firewall or your antivirus scanner.

+3


source






More articles:


All Articles