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

User · 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.

User · Answer

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  lt script src       gt  tags with  lt script gt     lt  script gt   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

User · Answer

Use http    or https    to create url   error  localhost 8080  solution  http   localhost 8080

User · Answer

I have also been able to recreate this error message when using an anchor tag with the following href     x000D   x000D   lt a href  javascript   gt Example a tag lt  a gt  x000D   x000D   x000D    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    x000D   x000D  cursor pointer  x000D   x000D   x000D

User · 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

User · 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 and cmd L  cmd C    Hope it will help someone

User · 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

User · 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

User · 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

User · 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

User · Answer

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

User · 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 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   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 typing npm install -g http-server Change into your working directory  where yoursome 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

User · Answer

In an Android app  mdash  for example  to allow JavaScript to have access to assets via file    android asset   mdash  use setAllowFileAccessFromFileURLs true  on the WebSettings that you get from calling getSettings   on the WebView

User · Answer

In Chrome you can use this flag   --allow-file-access-from-files   Read more here

User · 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

User · 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

User · 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

User · Answer

I m going to list 3 different approaches to 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  quot C  Program Files  x86  Google Chrome Application chrome exe quot  --disable-web-security --user-data-dir  quot C  ChromeDevSession quot  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

User · Answer

Experienced this when I downloaded a page for offline view    I just had to remove the integrity         and crossorigin  anonymous  attributes from all  lt link gt  and  lt script gt  tags

User · 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  quot --allow-file-access-from-files quot  mode

User · 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

User · 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

User · 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

User · Answer

For Linux Python users   import webbrowser browser   webbrowser get  google-chrome --allow-file-access-from-files  s   browser open url

User · 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

User · Answer

If you use Mozilla Firefox  It will work as expected without any issues    P S  Surprisingly  IntenetExplorer Edge works absolutely fine

User · 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

User · 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      lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE plist PUBLIC  -  Apple  DTD PLIST 1 0  EN   http   www apple com DTDs PropertyList-1 0 dtd  gt   lt plist version  1 0  gt   lt dict gt       lt key gt Label lt  key gt       lt string gt launch chrome dev mode lt  string gt       lt key gt ProgramArguments lt  key gt       lt array gt           lt string gt  Applications Google Chrome app Contents MacOS Google Chrome lt  string gt           lt string gt -allow-file-access-from-files lt  string gt       lt  array gt       lt key gt RunAtLoad lt  key gt       lt true  gt   lt  dict gt   lt  plist gt    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

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

Examples related to javascript

Examples related to file

Examples related to http

Examples related to three.js

Examples related to cors