Jsfiddle and CORS restrictions

Questions
,
1

Hi all,

I would like to publish yet another Jsfiddle, after I posted already a few of them. So, basically I know how it’s done. This time is different. though:

I’ve created a local copy of the three.module.js itself, which I directly modified and uploaded to my private webspace vielzutun.ch. I can access that file from a web browser, using the path as below, but when I try to use it in an import-directive in Jsfiddle, like this:

import * as THREE from "https://vielzutun.ch/wordpress/public/three.module.js";
//import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { GUI } from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";

I am confronted with CORS (cross origin resource sharing) violations, which apparently one of the Jsfiddle servers imposes.

Failed to load resource: Origin https://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

https://vielzutun.ch/wordpress/public/three.module.js

What would be the proper way to go about this? (Other than not hacking three.module.js directly)?

Motivation behind it:

I was successful in the integration of the non-affine, perspective correct texturing into Three.js, currently as a Proof of Concept for a LatheGeometry only. Which involved changing the shader codes, and I didn’t know how to get that into three.js other than hacking three.module.js directly. Now I would like to show off and share it with you :sunglasses:

2

You will have to edit the cors setting on your server at vielzutun.ch. The steps would depend on how and where you are hosting your website.
If you just want to edit some shaders within threejs, you can do it with THREE.ShaderChunk.shaderName = 'your code'. There are other better ways also like onBeforeCompile

Also have a look at https://codesandbox.io/ which is like jsfiddle but you can upload multiple js files, so you can upload your three.module.js and import it directly

1 Like
3

The solution in my case was a .htaccess file in the directory, where the file I wanted to make available via CORS resides.

It has the following content for an Apache Webserver:

Header set Access-Control-Allow-Origin "https://fiddle.jshell.net"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
Header always set Access-Control-Allow-Credentials "true"

Not sure if these are all necessary but it finally worked.