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

admin管理员组

文章数量:1125626

I'm trying to load a 3D model, stored locally on my computer, 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.

I'm trying to load a 3D model, stored locally on my computer, 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.

• javascript
• file
• http
• cross-domain
• cross-origin-resource-policy

Share Improve this question Follow edited Dec 18, 2022 at 16:27 donohoe 14.1k44 gold badges3939 silver badges5959 bronze badges asked May 25, 2012 at 9:41 corazzacorazza 32.3k3939 gold badges120120 silver badges191191 bronze badges 8

• 38 Are you trying to do this locally? – WojtekT Commented May 25, 2012 at 9:42
• 20 You need to use localhost, even if its local file – Neil Commented May 25, 2012 at 9:42
• 33 But it sin't cross domain! – corazza Commented May 25, 2012 at 10:17
• 28 If you're using Chrome, starting it from the terminal with the --allow-file-access-from-files option might help you out. – nickiaconis Commented Jul 3, 2013 at 20:37
• 15 Yeah, it's not really cross-domain when the file is in the same folder as the webpage, now is it... I found that if you use Firefox instead of Chrome, the problem goes away. – Sphinxxx Commented Apr 9, 2016 at 2:57

 |  Show 3 more comments

30 Answers 30

Sorted by: Reset to default 951

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.

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

If you have Python installed...

1. Change directory into the folder where your file some.html or file(s) exists using the command cd /path/to/your/folder

2. Start up a Python web server using one of below commands

   python -m SimpleHTTPServer # python 2

   python3 -m http.server # python 3

This will start a web server to host your entire directory listing at http://localhost:8000

3. You can use a custom port python3 -m http.server 9000 giving you link: http://localhost:9000 to point your browser at

This approach is built in to any Python installation.

VSCode

If you are using Visual Studio Code you can install the Live Server extension which provides a local web server ... after installing this extension click on Go Live widget on bottom of vscode window to launch browser pointing at your code dir

Node.js

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

1. Install http-server by typing npm install -g http-server

2. Change into your working directory, where yoursome.html lives

3. 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

In Chrome you can use this flag:

--allow-file-access-from-files

Read more here: How to launch html using Chrome at "--allow-file-access-from-files" mode?

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.

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.

I'm going to list 3 different approaches to solve this issue:

1. Using a very lightweight npm package: Install live-server using npm install -g live-server. Then, go to that directory open the terminal and type live-server and hit enter, page will be served at localhost:8080. BONUS: It also supports hot reloading by default.
2. 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!
3. 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 using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing.

Note: Use http:// like http://localhost:8080 in case you face error.

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

error: localhost:8080

solution: http://localhost:8080

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.

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

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 and cmd+L, cmd+C]

Hope it will help someone :)

If you use old version of Mozilla Firefox (pre-2019), it will work as expected without any issues;

P.S. Surprisingly, old versions of Internet Explorer & Edge work absolutely fine too.

Update: I personally turn off security.fileuri.strict_origin_policy in Firefox via about:config. It allows fetch to work in my local html files so I can test my work without having to start a server. Unlike Chrome, Firefox doesn't need to be restarted to change this policy. I have no clue how this may impact normal browsing; I assume it only affects local .HTML files you open. But Firefox is not my primary browser anyway, so I just leave it on.

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. Though it hasn't been updated since 2013. A modern alternative would be Laragon or WinNMP. I haven't tested them, but they are portable and worth mentioning. I also was a fan of Uniform Server years ago; but it seems a bit dated, yet still around.

Also, if you only want the absolute basics (HTML+JS), here's a tiny PowerShell script that doesn't need anything to be installed or downloaded:

$Srv = New-Object Net.HttpListener;
$Srv.Prefixes.Add("http://localhost:8080/");
$Srv.Start();
Start-Process "http://localhost:8080/index.html";
While($Srv.IsListening) {
    $Ctx = $Srv.GetContext();
    $Buf = [System.IO.File]::OpenRead((Join-Path $Pwd($Ctx.Request.RawUrl)));
    $Ctx.Response.ContentLength64 = $Buf.Length;
    $Ctx.Response.Headers.Add("Content-Type", "text/html");
    $Buf.CopyTo($Ctx.Response.OutputStream);
    $Buf.Close();
    $Ctx.Response.Close();
};

This method is very barebones, it cannot show directories or other fancy stuff. But it handles these CORS errors just fine.

Save the script as server.ps1 and run in the root of your project. It will launch index.html in the directory it is placed in.

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).

1. Go to: https://nodejs.org/en/download/. Install nodejs.

2. Install http-server by running command from command prompt npm install -g http-server.

3. Change into your working directory, where index.html/yoursome.html resides.

4. 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.

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.

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.

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

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.

Experienced this when I downloaded a page for offline view.

I just had to remove the integrity="*****" and crossorigin="anonymous" attributes from all <link> and <script> tags

If you insist on running the .html file locally and not serving it with a webserver, you can prevent those cross origin requests from happening in the first place by making the problematic resources available inline.

I had this problem when trying to to serve .js files through file://. My solution was to update my build script to replace <script src="..."> tags with <script>...</script>. Here's a gulp approach for doing that:

1. run npm install --save-dev to packages gulp, gulp-inline and del.

2. After creating a gulpfile.js to the root directory, add the following code (just change the file paths for whatever suits you):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. Either run gulp bundle-for-local or update your build script to run it automatically.

You can see the detailed problem and solution for my case here.

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!

本文标签：