“Cross origin requests are only supported for HTTP.” error when loading a local file

444
December 29, 2016, at 11:46 AM

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.

Answer 1

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

Answer 2

Just to be explicit - so yes you cannot point your browser directly at file://some/path/some.html so instead once you have python installed cd into the dir where some.html file(s) lives then issue :

 python -m SimpleHTTPServer  

which will spin up a web server hosting entire dir listing which you reference from URL :

http://localhost:8000

this is built into any python install (batteries are included). For python3 use this :

python3 -m http.server

Alternatively, if you demand a more responsive setup and already use nodejs just issue

npm install -g http-server

then, as above, cd into dir containing your some.html and issue :

http-server -c-1

which spins up a nodejs httpd which does a dir listing of your static files visible from :

http://localhost:8080 

If your preferred language is ruby ... the ruby Gods say this works as well

ruby -run -e httpd . -p 5000

Of course php also has its solution

php -S localhost:8000
Answer 3

In Chrome you can use this flag:

--allow-file-access-from-files

Read more here.

Answer 4

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 5

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 6

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 7

Simple Node.js Solution

1) install http-server: npm install http-server -g
2) run: http-server C:\location\to\app step 2 will out put like this

Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.0.104:8080

Now you have a local server up and running. You can access your app through url provided by step 2

Answer 8

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 9

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 10

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 11

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 12

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 13

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.

Rent Charter Buses Company
READ ALSO
How do I edit a CSS variable using JS?

How do I edit a CSS variable using JS?

I have these CSS variables to control the colors of my project so I can do theming

430
Set menu item only as trigger for sub menu in css

Set menu item only as trigger for sub menu in css

I'm having trouble in figuring out how to set a Menu-item as a trigger for the submenu, without displaying the content of the page the item is connected to

241
How to redirect someone after clicking on the menu

How to redirect someone after clicking on the menu

I want to ask how to redirect someone after clicking on something on my menu (Home, About, Contact, etc) to the coresponding page

254
advice on sticky nav footer (tel email fblink) layout needed

advice on sticky nav footer (tel email fblink) layout needed

The navbar height gets too big in a mobile screen size

309