I’m trying to load a 3D model into Three.js with JSONLoader
, and that 3D model is in the same directory as the entire website.
I’m getting the "Cross origin requests are only supported for HTTP."
error, but I don’t know what’s causing it nor how to fix it.
My crystal ball says that you are loading the model using either file://
or C:/
, which stays true to the error message as they are not http://
So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp
and change the url to http://example.com/path/to/model
Origin is defined in RFC-6454 as
...they have the same
scheme, host, and port. (See Section 4 for full details.)
So even though your file originates from the same host (localhost
), but as long as the scheme is different (http
/ file
), they are treated as different origin.
Answer:
Just to be explicit – Yes, the error is saying you cannot point your browser directly at file://some/path/some.html
Here are some options to quickly spin up a local web server to let your browser render local files
Python 2
If you have Python installed…
-
Change directory into the folder where your file
some.html
or file(s) exist using the commandcd /path/to/your/folder
-
Start up a Python web server using the command
python -m SimpleHTTPServer
This will start a web server to host your entire directory listing at http://localhost:8000
- You can use a custom port
python -m SimpleHTTPServer 9000
giving you link:http://localhost:9000
This approach is built in to any Python installation.
Python 3
Do the same steps, but use the following command instead python3 -m http.server
Node.js
Alternatively, if you demand a more responsive setup and already use nodejs…
-
Install
http-server
by typingnpm install -g http-server
-
Change into your working directory, where your
some.html
lives -
Start your http server by issuing
http-server -c-1
This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080
Ruby
If your preferred language is Ruby … the Ruby Gods say this works as well:
ruby -run -e httpd . -p 8080
PHP
Of course PHP also has its solution.
php -S localhost:8000
Answer:
Answer:
Ran in to this today.
I wrote some code that looked like this:
app.controller('ctrlr', function($scope, $http){
$http.get('localhost:3000').success(function(data) {
$scope.stuff = data;
});
});
…but it should’ve looked like this:
app.controller('ctrlr', function($scope, $http){
$http.get('http://localhost:3000').success(function(data) {
$scope.stuff = data;
});
});
The only difference was the lack of http://
in the second snippet of code.
Just wanted to put that out there in case there are others with a similar issue.
Answer:
Just change the url to http://localhost
instead of localhost
. If you open the html file from local, you should create a local server to serve that html file, the simplest way is using Web Server for Chrome
. That will fix the issue.
Answer:
In an Android app — for example, to allow JavaScript to have access to assets via file:///android_asset/
— use setAllowFileAccessFromFileURLs(true)
on the WebSettings
that you get from calling getSettings()
on the WebView
.
Answer:
Use http://
or https://
to create url
error: localhost:8080
solution: http://localhost:8080
Answer:
I’m going to list 3 different approaches to solve this issue:
- Using a very lightweight
npm
package: Install live-server usingnpm install -g live-server
. Then, go to that directory open the terminal and typelive-server
and hit enter, page will be served atlocalhost:8080
. BONUS: It also supports hot reloading by default. - Using a lightweight Google Chrome app developed by Google: Install the app then, go to the apps tab in Chrome and open the app. In the app point it to the right folder. Your page will be served!
- Modifying Chrome shortcut in windows: Create a Chrome browser’s shortcut. Right-click on the icon and open properties. In properties, edit
target
to"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"
and save. Then using Chrome open the page usingctrl+o
. NOTE: Do NOT use this shortcut for regular browsing.
Answer:
fastest way for me was:
for windows users run your file on Firefox problem solved, or
if you want to use chrome easiest way for me was to install Python 3 then from command prompt run command python -m http.server
then go to http://localhost:8000/ then navigate to your files
python -m http.server
Answer:
For those on Windows without Python or Node.js, there is still a lightweight solution: Mongoose.
All you do is drag the executable to wherever the root of the server should be, and run it. An icon will appear in the taskbar and it’ll navigate to the server in the default browser.
Also, Z-WAMP is a 100% portable WAMP that runs in a single folder, it’s awesome. That’s an option if you need a quick PHP and MySQL server.
Answer:
If you use Mozilla Firefox, It will work as expected without any issues;
P.S. Surprisingly, IntenetExplorer_Edge works absolutely fine!!!
Answer:
Easy solution for whom using VS Code
I’ve been getting this error for a while. Most of the answers works. But I found a different solution. If you don’t want to deal with node.js
or any other solution in here and you are working with an HTML file (calling functions from another js file or fetch json api’s) try to use Live Server extension.
It allows you to open a live server easily. And because of it creates localhost
server, the problem is resolving. You can simply start the localhost
by open a HTML file and right-click on the editor and click on Open with Live Server
.
It basically load the files using http://localhost/index.html
instead of using file://...
.
EDIT
It is not necessary to have a .html
file. You can start the Live Server with shortcuts.
Hit
(alt+L, alt+O)
to Open the Server and(alt+L, alt+C)
to Stop the server. [On MAC,cmd+L, cmd+O
andcmd+L, cmd+C
]
Hope it will help someone 🙂
Answer:
I was getting this exact error when loading an HTML file on the browser that was using a json file from the local directory. In my case, I was able to solve this by creating a simple node server that allowed to server static content. I left the code for this at this other answer.
Answer:
I suggest you use a mini-server to run these kind of applications on localhost (if you are not using some inbuilt server).
Here’s one that is very simple to setup and run:
https://www.npmjs.com/package/tiny-server
Answer:
I suspect it’s already mentioned in some of the answers, but I’ll slightly modify this to have complete working answer (easier to find and use).
-
Go to: https://nodejs.org/en/download/. Install nodejs.
-
Install http-server by running command from command prompt
npm install -g http-server
. -
Change into your working directory, where
index.html
/yoursome.html
resides. -
Start your http server by running command
http-server -c-1
Open web browser to http://localhost:8080
or http://localhost:8080/yoursome.html
– depending on your html filename.
Answer:
It simply says that the application should be run on a web server. I had the same problem with chrome, I started tomcat and moved my application there, and it worked.
Answer:
er. I just found some official words “Attempting to load unbuilt, remote AMD modules that use the dojo/text plugin will fail due to cross-origin security restrictions. (Built versions of AMD modules are unaffected because the calls to dojo/text are eliminated by the build system.)” https://dojotoolkit.org/documentation/tutorials/1.10/cdn/
Answer:
One way it worked loading local files is using them with in the project folder instead of outside your project folder. Create one folder under your project example files similar to the way we create for images and replace the section where using complete local path other than project path and use relative url of file under project folder .
It worked for me
Answer:
For all y’all on MacOS
… setup a simple LaunchAgent to enable these glamorous capabilities in your own copy of Chrome…
Save a plist
, named whatever (launch.chrome.dev.mode.plist
, for example) in ~/Library/LaunchAgents
with similar content to…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>launch.chrome.dev.mode</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
<string>-allow-file-access-from-files</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>
It should launch at startup.. but you can force it to do so at any time with the terminal command
launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist
TADA! 😎 💁🏻 🙊 🙏🏾
Answer:
Answer:
I have also been able to recreate this error message when using an anchor tag with the following href:
<a href="javascript:">Example a tag</a>
In my case an a tag was being used to get the ‘Pointer Cursor’ and the event was actually controlled by some jQuery on click event. I removed the href and added a class that applies:
cursor:pointer;
Answer:
Not possible to load static local files(eg:svg) without server. If you have NPM /YARN installed in your machine, you can setup simple http server using “http-server”
npm install http-server -g
http-server [path] [options]
Or open terminal in that project folder and type “hs”. It will automaticaly start HTTP live server.
Answer:
Many problem for this, with my problem is missing ‘/’ example:
jquery-1.10.2.js:8720 XMLHttpRequest cannot load http://localhost:xxxProduct/getList_tagLabels/
It’s must be: http://localhost:xxx/Product/getList_tagLabels/
I hope this help for who meet this problem.
Answer:
first close all instance of chrome.
after that follow this.
I used this command on mac .
“/Applications/Google Chrome.app/Contents/MacOS/Google Chrome” –allow-file-access-from-files
For windows:
How to launch html using Chrome at "–allow-file-access-from-files" mode?
Answer:
cordova achieve this. I still can not figure out how cordova did. It does not even go through shouldInterceptRequest.
Later I found out that the key to load any file from local is: myWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
And when you want to access any http resource, the webview will do checking with OPTIONS method, which you can grant the access through WebViewClient.shouldInterceptRequest by return a response, and for the following GET/POST method, you can just return null.
Tags: file, http, java, javascriptjavascript