I am trying to load a VRML model with three.js, but it seems my code does not work properly, and I cannot display the 3D model on a web page. Is there something wrong in my code?
var loader = new THREE.VRMLLoader();
loader.load('./Bluegg/Bluegg/Bluegg.wrl', function(object){
alert(object);
scene.add(object);
});
and the error message says
Failed to load file:///C:/Users/ninom/Desktop/takahiro_note/3DJS/Bluegg/Bluegg/Bluegg.wrl: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
What does this message mean? Thank you for taking your time.
From the documentation section on how to run things locally -
If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.
If your page is using a file:// URL, then it is loading from the file system as described above. To fix this, you'll need to run a local server. There are plenty of quick ways to do that mentioned in the docs. One that I like, with Node.js v6+ installed, is:
# first time only
npm install -g serve
# start a local server "hosting" the current directory
serve .
Related
I have an index.html file that connect to file called main.js.
I try to import another js file into the main.js using import, but always get the following error:
Access to script at 'file:///C:/...js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I tried to open a server but it didn't solve the problem. I don't know if the problem is in my html file or js files and I really need your help.
My code goes like this:
index.html
<body>
<script type="module" src='./js/main.js'></script>
</body>
main.js
import {
double
} from './utils.js';
utils.js
export function double(n) {
return n * 2;
}
You've probably fixed the problem by now, but for anyone googling in the future, here's the solution.
The error message says that you can't access the file from origin "null", and states that you can only do these requests with certain protocol schemes. The protocol scheme that local files on your computer have is "file://", and I think the origin: "null" thing is about it not being on a website (e.g. http://a.com vs file://a/b/c).
What you need to do to fix this is start a local server. The easiest approach is to use this python one-liner. If you are on MacOSX or Linux, go ahead and use the below command:
$ cd path/to/website
$ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8000 ...
If you are on Windows, you need to install Python before making the server. To do so, go to the downloads page on their website and download the latest version. To check if it is installed, run this in the command prompt:
python -V
If you get something like Python 3.9.5, you can go ahead and run the command mentioned before.
Once you have got the server started, just navigate to http://localhost:8080/ in your browser.
I'm playing around with three.js locally with a single HTML page, and I want to play around with loading and moving around 3D object files. From sample code I have the following copied:
var loader = new THREE.AMFLoader();
loader.load( './models/rook.amf', function ( amfobject ) { //'./models/rook.amf'
scene.add( amfobject );
render();
} );
And in Chrome I get the following error:
Access to XMLHttpRequest at 'file:///C:/Users/me/Desktop/project/models/rook.amf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
What's a simple and safe way I can get around this and get back to learning threejs? Can I add some sort of permission code somewhere? Upload my 3D model somewhere and load from an http location (and if so, where could I do this easily and free)?
There are two ways to solve this:
1.Change security for local files in a browser. For chrome, this can be done by searching for the path of your Chrome executable and then, on your cmd :
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
2.Run files from a local web server. This allows you to access your page as:
http://localhost/yourFile.html
You can get more information to Run a local server here
Instead of directly giving the file path, you can serve your html file with simple server: https://www.npmjs.com/package/http-server.
Open a terminal:
cd ./Users/me/Desktop/project/
npm install --global http-server
http-server -p 4200
This will serve index.html file at http://localhost:4200/ on your default browser.
I just started building my second Vue project, and for the first time I wanted to use the Vue CLI and NPM rather than just loading Vue via CDN.
Installing the CLI and setting up the project worked without problems, but when I ran "npm run serve" and navigated to localhost:8080 in my browser (latest Firefox) to see if it worked, I got the following error message in my browser console multiple times:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://10.126.86.51:8080/sockjs-node/info?t=1584021154635. (Reason: CORS request did not succeed).
I also get this error message once right after loading the page:
[WDS] Disconnected!
Does anyone know what these errors mean, why I get them and how I can get rid of them?
The first one seems to be related to some kind of cross-origin call that the app is making using the host's actual IP rather than localhost, but I can't think of any reason why it would, given that I literally just installed and served the example project and did not change anything after running "vue create"
Edit: I am on Ubuntu 19.10 Desktop
First of all, what kind of OS you are working on? If you are working on unix based systems, a service (like nginx) could produce this error. If so, try stopping it.
Afterwards I would try to run your application from vue ui.
Type in your terminal:
vue ui
This starts the web based graphical user interface of vue cli. You can handle your app development from there by starting your service and run your build command.
ATTENTION: you must add (import, NOT create) your project (root folder) to the UI.
If you get the same error inside your browser console, set up a vagrant box. First steps are explained here:
https://www.vagrantup.com/intro/getting-started/
Follow instructions for project setup.
Simplest way would be running
vagrant init
inside your project folder. Therefore you don't have to setup a new project.
After running the init command, try running
npm run serve
or use vue UI instead (as explained above), if you prefer it.
If the problem still exists, more infos about your OS would be helpful.
I am new in React learning. I've just donwloaded Starter Kit 15.3.0 from this site: https://facebook.github.io/react/docs/getting-started.html
I'm using chrome browser. When trying to include a separate js file into html page like
https://facebook.github.io/react/docs/getting-started.html#separate-file
says, the chrome reports an error:
XMLHttpRequest cannot load file:///C:/Users/jxu200/Desktop/react-15.3.0/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I noticed that it is mentioned by react team that:
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served
via HTTP.
my question is: why
react.js/react-dom.js/react-dom-server.js/react-with-addons.js,
all js files in the /build folder can be loaded without a problem, but js files created by myself cannot be loaded normally ? even if I place my js file in the /build folder ? What does chrome actually do when loading react.js codes ?
You need some development server as pointed up in comments. You can use webpack for larger projects but for running just examples you should be fine with simple serve npm package.
Install NodeJS
Open node command prompt (or console if you are using Linux/OSX)
Install npm serve package npm install -g serve
From command line navigate to your starter kit folder and run serve command
In browser navigate to http://localhost:3000/
am getting the following error please help mejavascript ,
angular.min.js:103 XMLHttpRequest cannot load file:///C:/Users/DELL/Documents/jmyangularjsprojects/myangularjsprojects/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) # angular.min.js:103
I believe you are trying to run your application from your local file system, rather than using a web server. My first recommendation for you is to host the files on a web server.
If you are using Chrome, it won't let you do cross origin requests, you cannot load file:/// and instead you need to use http:// protocol at all times.
Use this workaround for chrome as a temporary fix.
Find the path where you installed Chrome and do
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
XMLHttpRequest can not load file means you can not parse an external data file (ex csv file). This is for security reason inside Chrome. However, to be able to download your data using d3.csv, you must follow the following steps:
Open you anaconda command window (Anaconda Prompt) (test Python is working)
Go to the directory where is your html file (cd xxx/xxx/xxx/index.html)
Run the following command: python -m http.server (in Python 3)
You will see: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).
Open a Chrome: http://localhost:8000
Then execute Ctrl + Shift I to open the development window, then click on Console to see your csv data.
This will solve your problem. Hope this will help.