The loading of images in THREE.js has been denied due to the Cross-Origin Resource Sharing policy restrictions

My Chrome version is 31.0.1650.57

Currently, I am in the process of learning THREE.js and decided to try out a planet sample that I downloaded from https://github.com/jeromeetienne/threex.planets/

Unexpectedly, when I try to run the earth.html file,

I encounter a peculiar error, as indicated by the title:

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

Upon inspecting the code, I came across a section that seems to be linked to this error:

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

However, being relatively new to JavaScript, I am unsure of how to address this issue,

Any guidance or assistance would be greatly appreciated!

Thank you very much!

javascriptcanvasthree.jscross-domaincors

Answer №1

Are you executing this on a local hard drive (by double-clicking the HTML file) or on a web server? If you are running it on a web server, it's advisable to steer clear of cross-origin permission issues. (Browsers like Chrome have this security feature in place.)

Answer №2

To resolve the issue, I successfully resolved it by installing Node.js and setting up a local server to access the HTML file!

Answer №3

You might want to try something along these lines to resolve the issue:

let img = new Image();
img.onload = function(){
 THREE.ImageUtils.loadTexture(img);
 // alternatively, you could load the image into a canvas
}
img.crossOrigin = "anonymous";
img.src = THREEx.Planets.baseURL + 'images/earthmap1k.jpg';

Answer №4

To ensure proper image loading, add the crossOrigin="anonymous" attribute in your image tag like this:

<img src="IMAGE_URL" crossOrigin="anonymous" /
>

Answer №5

The issue at hand is that in order to properly execute your project or a Three.js example, you must be in a server environment. As mentioned in the previous response, running your code in nodejs or Appserv will provide the necessary local server setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with Node JS controller when using async/await

While working on my Node API controller, I encountered an issue with my 'error-handler' middleware related to using an asynchronous function. TypeError: fn is not a function at eval (webpack:///./app/middleware/errorHandler.js?:16:21) T ...

javascriptnode.jsexpressasync-await

Is it possible for the $.post function to overwrite variables within the parent function?

Recently, I delved into the world of JavaScript and my understanding is quite limited at this point. So, please bear with me as I learn :-) I am working on a basic booking system that saves dates and user IDs in MySQL. The system checks if a particular da ...

javascriptjquerypost

"Create a React button component that, when clicked, navig

I'm currently developing a web application using React and bootstrap. I'm facing difficulties in redirecting the page to another one when applying onClick to buttons. After adding a href, I'm unable to navigate to another page. Do you think ...

javascriptreactjsbootstrap-4

JQuery appended Bootstrap Modal to Body, but it refuses to close

After going through the process of appending the modal to the body and getting the text box working, I encountered an issue when trying to close it on the AJAX success event - none of my attempted solutions seem to be effective. var id; var refundAmount ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

What is the best method for transferring properties to the parent component using Vue router?

I have a multi-step form that each step has a different header structure. The only variation in the header among the steps is the wording, which changes as you progress through the steps. I am looking for a way to achieve this using Vue Router: pa ...

javascriptvue.jsvue-router

JavaScript - Error: The '}' token was unexpected

Every time I attempt to move <div id="test">this should go down</div> downwards using: <div onclick="(".test").slideDown(800);">close it</div> I encounter an error whenever I click 'close it' SyntaxError: Unexpected to ...

javascript

How can you modify the starting point of data in jQuery flot?

Currently using Flot to create a graph displaying clicks per minute within the first 60 minutes of short URLs generated at . The graph currently displays data from minute 0 to minute 59. My query is about adjusting the data to start at 1 and end at 59, wh ...

javascriptjqueryjsonflot

Tips for navigating a list of areas in JavaScript

Currently, I am in the process of learning Javascript and I have a query regarding browsing an area list using Javascript. Could someone kindly guide me on whether it is possible to achieve this, and if so, how? Below is the HTML code snippet I am workin ...

javascripthtmlarea

The redirection to the HTML page happens too soon, causing the ASYNC functions to fail in saving the user's image and data to the server

Hey everyone! I'm facing an issue with async/await functions. Here's the code snippet from my backend where I'm trying to save details of a newly registered user. I'm puzzled as to why the Redirect() function is executing before the f ...

javascriptnode.jsexpresspath

The process of exporting and utilizing models in Sequelize

When working on my node.js project with sequelize, I encountered a challenge of exporting and using table models in another file. I typically save table models in a folder, for instance Profile.js. module.exports = (sequelize, DataTypes) => sequelize.d ...

javascriptnode.jssequelize.js

What is the best way to extract JSON data from a remote URL?

Having recently started with JavaScript, I am looking to parse JSON from an external URL using pure JavaScript. Currently, I have the following code: var getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, tr ...

javascriptjson

Switching Story Tense on Facebook Open Graph

After creating a unique story for my facebook app, I discovered that when making a basic story post using the facebook js sdk, the resulting post is in past tense and depicts the object in singular form. For example, instead of saying: John is eating an a ...

javascriptfacebookfacebook-javascript-sdkfacebook-opengraph

How to eliminate properties from a nested array using D3

I've been attempting to filter out specific attributes from an array using D3. The array consists of values from a CSV file. Everything went smoothly for a small CSV file when I did it like this: d3.csv("foods.csv", function(data) { data.forEach(fun ...

javascriptarrayscsvd3.js

Unable to refresh data dynamically in pagination using DataTables

Currently, I am implementing a Datatable plugin to enable pagination on my HTML table. Within the table, there is a checkbox for selecting rows and each row possesses a unique ID. However, I am facing an issue when attempting to update cells of a specific ...

javascriptjqueryajaxdatatablepagination

431 - (Excessive Request Header Size)

First time asking for help, please take that into consideration What I've tried: I cleared my Google Chrome cache and cookies, attempted incognito mode, updated to the latest node version, but still encountering the same error. Error message in Chro ...

javascriptnode.jsreactjsexpressredux

Jquery UI sortable can determine the vertical orientation, either moving items up or down

I am having difficulty determining the direction in which axis N is moving, whether up or down. I would also like the elements (h2 and p) inside to remain in their positions. Can anyone provide assistance? http://jsfiddle.net/zerolfc/y62awe4u/2/ <div ...

javascriptjqueryjquery-uiresizable

The React/Three.js project deployed on Vercel is experiencing performance issues, however, it runs smoothly when tested locally

Recently, I encountered an issue with my simple React project that utilizes Three.js to create a 3D scene. While testing it locally, everything worked perfectly with frame rates between 40-60 fps. However, when I decided to host it on Vercel, the performan ...

reactjsperformancethree.js3dvercel

From Ruby to Javascript: Solving the Challenges of Date Calculation

Can you help me convert this Ruby snippet into JavaScript? I can't seem to get the expected output. Here is the original Ruby code: require 'date' moment = DateTime.new(2014, 9, 27, 0, 0, 0, DateTime.now.offset) intervals = [['day&apo ...

javascriptrubynode.jscoffeescript

Attempting to transfer a string variable into a JavaScript scope within an HTML document using handlebars-express

Struggling to pass a variable from server-side to client-side using handlebars-express... After searching through the content here for some time, I realize I might need some help. I've confirmed that the object passed is indeed of string type, but h ...

javascripthtmlexpressexpress-handlebars

Transforming an array of strings into an array: a guide

An API call is returning an object with the following structure: data = { ... filter: "[1,2,3]" ... } I need to convert the string of array into an actual array of numbers, like [1,2,3]. Thank you! ...

javascriptnode.jstypescript