Encountering a Cross-Origin error while trying to load a JavaScript file using Three.js on Amazon S3

I have uploaded several large files on Amazon S3 that I would like to load on my website using a Three.js load call. However, every time I try to load these files, I encounter an error stating that the loading is not permitted due to access control allow-origin restrictions. Here is the load call I am using:

loader = new THREE.JSONLoader();
loader.load("https://s3.amazonaws.com/folder/shoot-o.js",function(geometry){
    //DO STUFF
});

Is there a way for me to bypass this restriction and access these files?

javascriptajaxjsonamazon-s3three.js

Answer №1

One method I have found to work with the three loader is by having the server send an 

Access-Control-Allow-Origin: yourdomain.com
header along with your hosted file. It's uncertain if this can be done on s3, though.

Another option is to explore using JSONP (JSON with Padding). You could do something like this:

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "https://s3.amazonaws.com/folder/shoot-o.js";
head.appendChild(script);

Then adjust your js file so that the JSON data is wrapped in a js function call:

loadJSON({yourData: true, ...});

Create the loadJSON function to accept the JSON data as its first parameter and process it accordingly.

A discussion addressing the issue with the THREE loader can be found here

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

Navigating a vast JSON dataset containing identical key names: A step-by-step guide

I am faced with a massive json file that has the following format: name: 'xxx', worth: [123, 456, 789] children: [ {name: 'xxx', worth: [987, 654, 321], children: [ {name: 'xxx', ...

arraysjsonangulartypescript

"Encountering issues with Rails and AJAX where the data returning is showing up

I am facing a challenge while trying to use AJAX in Rails to POST a comment without using remote: true. I am confused as to why my myJSON variable is showing up as undefined, while data is returning as expected. Check out my code below: function submitVi ...

javascriptruby-on-railsajax

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

javascripthtmlcss

Adjust the cursor in a contenteditable division on Chrome or Webkit

Is there a way to set the caret position in a contenteditable div layer? After trying different methods and doing some research online, I finally found a solution that works in firefox: function set(element,position){ element.focus(); var range= w ...

javascripthtmlcontenteditablecaret

After a period of running NodeJS and AngularJS together, I am encountering the net::ERR_CONNECTION_RESET error

My setup includes Express with NodeJS and AngularJS on the front-end. However, after performing a series of actions such as adding data, updating records, and showing a list, I encounter the error net::ERR_CONNECTION_RESET. Interestingly, this error only o ...

javascriptangularjsnode.js

Guide on verifying the presence of an alert with nodejs webdriver (wd)

I am currently facing a challenge when writing a test where I need to verify the existence of an alert, check its text if it is present, and then accept it. Although I have researched on platforms like Stack Overflow for solutions such as checking for ale ...

javascriptnode.jsseleniumremotewebdriver

I require displaying the initial three letters of the term "basketball" and then adding dots

Just starting out with CSS and struggling with the flex property. Seems to work fine at larger sizes, but when I reduce the screen size to 320px, I run into issues... Can anyone help me display only the first three letters of "basketball ...

javascripthtmlcss

Error: Unable to initialize TypeError: The function (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) cannot be found

While trying to initialize Firebase in my next.js project, I encountered the following error: TypeError: (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) is not a function Here is the code snippet I used. Despite my expectations o ...

javascriptfirebasegoogle-cloud-firestorenext.js

Transform JSON attribute string into a JSON data structure

Here is a struct I am working with: type ResponseStatus struct { StatusCode int Message string Data string `json:"data"` } type Pets struct { Id int `json:"id"` Name string `json:"name"` Age int `json:"age"` ...

jsongo

The feature of @input two-way binding fails to function properly

I need to retrieve the text from a text area in my child component and display it on the parent component while keeping it up to date. Someone mentioned that @Input in Angular 4 is meant for two-way binding. However, I am unable to achieve this and I&apos ...

javascriptangulartypescript

Make JSON.NET convert XML into a JSON array without hesitation

I'm currently utilizing JSON.NET to convert XML data into JSON format. The structure of my XML data is as follows: <Root> <Product> <Name /> <Id /> </Product> <Product> <Name ...

c#.netjsonjson.net

Error: Attempting to access the 'toString' property of an undefined object is not permitted (apex-charts)

While working on a personal project, I considered using apexcharts. However, an error shown in the image kept popping up. It seemed to disappear when I set the width and height properties in the Chart component or when the site was in production. Currently ...

javascriptsassnext.jsapexcharts

Using PHP to handle JSON responses

I am currently working on a project that involves retrieving JSON responses using PHP. My goal is to obtain a JSON array without any HTML tags mixed in, but unfortunately, the output includes unwanted HTML tags. I need assistance in figuring out how to r ...

phphtmljsonjsonreststore

It is important to ensure that the user returned by the onAuthStateChanged function in

server admin.auth().createCustomToken(uuid) .then((customToken) => { admin.auth().createUser({ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed989e889fad88958c809d8188c38e8280">[email protected] ...

javascriptnode.jsfirebase-authenticationfirebase-admin

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

javascripthtmlbillboard.js

The main page is experiencing issues with loading pages due to failed Ajax calls

I am facing an issue while trying to load different pages through ajax call. The pages are not being displayed on the main page. Here is the code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

javascripthtmlajax

In order to obtain the desired outcome, please refer to the data provided in the

-- Here are some sample tables to get started: create table general ( id serial primary key, sno smallint not null, name varchar not null, qty decimal(12,3) not null ); insert into general (sno,name,qty) values (1,'x',7), ...

sqljsonpostgresql

What is the best way to trigger an ajax request when a user selects a tab?

How can I trigger an ajax call when a tab is clicked by the user? What is the best way to handle the HTML response and display it within the tab? How do I bind JavaScript events to the dynamically loaded HTML content? I am familiar with using jQueryUI tab ...

javascriptjqueryajaxckeditor

Why isn't my Javascript code functioning properly?

I have been trying to use JavaScript to set equal column heights of two divs within a parent div. Someone else was able to provide a working example, but unfortunately I am having trouble making it work correctly (my version doesn't seem to be functio ...

asp.netjavascriptjquery

How can I ensure that the state is only updated after the map function has finished executing in React?

I am encountering an issue with updating the state after mapping over an array of ids using an async function. The goal is to store the result in newArr and then update the state via setState. However, the state is being updated before the mapping operatio ...

javascriptreactjsreact-nativeasynchronousasync-await