Advertisement
Advertisement


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


Question

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.

2014/12/02
1
819
12/2/2014 12:33:43 PM

Accepted Answer

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.

2019/05/13
802
5/13/2019 10:57:17 AM


In Chrome you can use this flag:

--allow-file-access-from-files

Read more here.

2017/05/23

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.

2014/02/20

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.

2017/07/08

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.

2016/12/29

Use http:// or https:// to create url

error: localhost:8080

solution: http://localhost:8080

2018/10/12