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

【问题标题】："Cross origin requests are only supported for HTTP." error when loading a local file\"Cross origin requests are only supported for HTTP.\" error when loading a local file
【发布时间】：2022-12-19 00:27:57
【问题描述】：

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.

【问题讨论】：

Are you trying to do this locally?
You need to use localhost, even if its local file
But it sin't cross domain!
If you're using Chrome, starting it from the terminal with the --allow-file-access-from-files option might help you out.
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.

标签： javascript file http cross-domain cross-origin-resource-policy

【解决方案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

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.

【讨论】：

Yeah, I'm trying to do this using file://, but I don't understand why this is permitted. Well, I'm installing Lampp I guess...
Imagine if that is allowed and a webapp whereby the author of the page uses something like load('file://C:/users/user/supersecret.doc') and then upload the content to their server using ajax etc.
But I'm trying to load something from my own directory, even index.html is located there!
unfortunately, policy is made for all cases, not only for yours :(, so ya gotta bear with it
You may also use the --allow-file-access-from-files switch in chrome. Per my answer here: stackoverflow.com/questions/8449716/…

【解决方案2】：

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 command cd /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
1. 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

VSCode

If you are using Visual Studio Code you can install the Live Server extension which provides a local web server enviroment.

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
```

【讨论】：

This saved me a ton of time thanks. My Python install didnt have the SimpleHTTPServer module but the node instructions worked like a charm.
In response to LukeP's comment, in python 2.7 the command does work as per the instructions $ python -m SimpleHTTPServer, which produces the message: Serving HTTP on 0.0.0.0 port 8000 ... If you spell the module name wrong, e.g. $ python -m SimpleHttpServer then you will get the error message No module named SimpleHttpServer You will get a similar error message if you have python3 installed (v. python 2.7). You can check your version of python using the command: $ python --version. You can also specify the port to listen on like this: $ python -m SimpleHTTPServer 3333
The python server serves up files from the directory where you start the server. So if the files you want to serve up are located in /Users/7stud/angular_projects/1app, then start the server in that directory, e.g. $ cd ~/angular_projects/1app, then $ python -m SimpleHTTPServer. In your browser enter the url http://localhost:8000/index.html. You can also request files in subdirectories of the directory where you started the server, e.g. http://localhost:8000/subdir/hello.html
I've heard that Python is simple and powerful, just like "X" language, but this is ridiculous! No need to install XAMPP, or setup a simple http server js with node to serve static files - One command and boom! Thank you very much, saves a LOT of time and hassle.
AWESOME! - for Python on Windows use: python -m http.server 8080 ...or whatever port you want and when you want to quit it just ctrl-c.

【解决方案3】：

In Chrome you can use this flag:

--allow-file-access-from-files

Read more here.

【讨论】：

@Blairg23, keep in mind that this solution requires restarting all instances of Chrome.exe for it to work
Please, explain how to use it in chrome.
@Priya Should not do this though
I would suggest using Chromium only for local debugging (starting it with flag --allow-file-access-from-files). It means using Chrome for common web browsing, and use Chromium as the default application for HTML file.
Note that fetch() still denies this anyway. You must use XMLHttpRequest in some manner

【解决方案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 sn-p of code.

Just wanted to put that out there in case there are others with a similar issue.

【讨论】：

【解决方案5】：

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.

【讨论】：

+1 for Web Server for Chrome app link - it's by far the simplest & cleanest solution for temporary httpd setup for Chrome IMO
It saved me. The exact solution

【解决方案6】：

I'm going to list3 different approachesto solve this issue:

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.
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)GoogleChromeApplicationchrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: DoNOTuse this shortcut for regular browsing.
Note:Use http:// like http://localhost:8080 in case you face error.

【讨论】：

【解决方案7】：

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

error: localhost:8080

solution: http://localhost:8080

【讨论】：

Exactly same issue. I didn't know I was using without http:
omg i was looking for the sollution in 3 hours thanks

【解决方案8】：

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.

【讨论】：

Brilliant! We were just about to rewrite methods to inject JSON into variables .. but this works! webView.getSettings().setAllowFileAccessFromFileURLs(true);

【解决方案9】：

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

【讨论】：

【解决方案10】：

If you use Mozilla Firefox, It will work as expected without any issues;

P.S. Surprisingly, IntenetExplorer_Edge works absolutely fine!!!

【讨论】：

not anymore. firefox and ie are both blocking cors request for me.

【解决方案11】：

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

【讨论】：

【解决方案12】：

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.

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.

【讨论】：

If you install php or you have installed, you can start a server in your folder: php.net/manual/es/features.commandline.webserver.php
@jechaviz That manual is in Spanish!

【解决方案13】：

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.

【讨论】：

After running the command http-server -c-1 to start the http server, what command do I issue to stop it later without closing the command prompt?

【解决方案14】：

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.

【讨论】：

【解决方案15】：

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.

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

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

【讨论】：

I don't understand the downvoting for this answer, it does solve the issue for me in Chrome.

【解决方案18】：

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

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.

【讨论】：

【解决方案19】：

For all y'all on MacOS... setup a simpleLaunchAgentto enable these glamorous capabilities in your own copy ofChrome...

Save a plist, namedwhatever(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>

Itshouldlaunch 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!? ?? ? ??

【讨论】：

Thanks, @Alex Gray. your method works for me. Can it be used for other browsers? If so, how can I do it? I tried it with Brave Browser, it did not work.

【解决方案20】：

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.

【讨论】：

duplicate answer

【解决方案21】：

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/

【讨论】：

【解决方案22】：

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

【讨论】：

【解决方案23】：

Install local webserver for java e.g Tomcat,for php you can use lamp etc
Drop the json file in the public accessible app server directory
Start the app server,and you should be able to access the file from localhost

【讨论】：

【解决方案24】：

For Linux Python users:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

【讨论】：

Is there no reason why google-chrome --allow-file-access-from-files <url> wouldn't work and be more concise?
@agupta231 The webbrowser module have arguments that enable you different kinds of "opening" eg. open in current tab, new tab, new window etc.
can the url be a file path?

【解决方案25】：

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.

【讨论】：

【解决方案26】：

I have also been able to recreate this error message when using an anchor tag with the following href:

&lt;a href="javascript:"&gt;Example a tag&lt;/a&gt;

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;

【讨论】：

【解决方案27】：

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.

【讨论】：

【解决方案28】：

If you are searching for a solution for Firebase Hosting, you can run the

firebase serve --only hosting command from the Firebase CLI

That's what I came here for, so I thought I'd just leave it here to help like ones.

【讨论】：

【解决方案29】：

If your using VS code just trying loading a live server in there. fixed my problem immediately.

【讨论】：

【解决方案30】：

url should be like:

 createUserURL = "http://www.localhost:3000/api/angular/users"

instead of:

 createUserURL = "localhost:3000/api/angular/users"

【讨论】：

Python 2

Python 3

VSCode

Node.js

Ruby

PHP