XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file to file Serverless

Question

I m trying to create a website that can be downloaded and run locally by launching its index file   All the files are local  no resources are used online   When I try to use the AJAXSLT plugin for jQuery to process an XML file with an XSL template  in sub directories   I receive the following errors   XMLHttpRequest cannot load file    C  path to XSL 20Website data home xml  Origin null is not allowed by Access-Control-Allow-Origin   XMLHttpRequest cannot load file    C  path to XSL 20Website assets xsl main xsl  Origin null is not allowed by Access-Control-Allow-Origin   The index file making the request is file    C  path to XSL 20Website index html while the JavaScript files used are stored in file    C  path to XSL 20Website assets js    How can I do to fix this issue

User · Accepted Answer

For instances where running a local webserver is not an option, you can allow Chrome access to file:// files via a browser switch. After some digging, I found this discussion, which mentions a browser switch in opening post. Run your Chrome instance with:

chrome.exe --allow-file-access-from-files

This may be acceptable for development environments, but little else. You certainly don't want this on all the time. This still appears to be an open issue (as of Jan 2011).

See also: Problems with jQuery getJSON using local files in Chrome

User · Answer

Essentially the only way to deal with this is to have a webserver running on localhost and to serve them from there   It is insecure for a browser to allow an ajax request to access any file on your computer  therefore most browsers seem to treat  file     requests as having no origin for the purpose of  Same Origin Policy   Starting a webserver can be as trivial as cding into the directory the files are in and running   python -m SimpleHTTPServer

User · Answer

You can try putting  Access-Control-Allow-Origin      in response writeHead     here

User · Answer

This solution will allow you to load a local script using jQuery getScript    This is a global setting but you can also set the crossDomain option on a per-request basis     ajaxPrefilter   json script   function  options       options crossDomain   true

User · Answer

What about using the javascript FileReader function to open the local file  ie    lt input type  file  name  filename  id  filename  gt   lt script gt      filename   change function  e      if  e target files    undefined        var reader   new FileReader        reader onload   function  e               Get all the contents in the file         var data   e target result              other stuffss                                        reader readAsText e target files item 0             lt  script gt    Now Click Choose file button and browse to the file file    C  path to XSL 20Website data home xml

User · Answer

Here is an applescript that will launch Chrome with the --allow-file-access-from-files switch turned on  for OSX Chrome devs out there   set chromePath to POSIX path of   Applications Google Chrome app Contents MacOS Google Chrome      set switch to   --allow-file-access-from-files  do shell script  quoted form of chromePath   amp  switch  amp     gt   dev null 2 gt  amp 1  amp

User · Answer

Launch chrome like so to bypass this restriction  open -a   Applications Google Chrome app Contents MacOS Google Chrome  --args --allow-file-access-from-files   Derived from Josh Lee s comment but I needed to specify the full path to Google Chrome so as to avoid having Google Chrome opening from my Windows partition  in Parallels

User · Answer

The way I just worked around this is not to use XMLHTTPRequest at all  but include the data needed in a separate javascript file instead   In my case I needed a binary SQLite blob to use with https   github com kripken sql js    I created a file called base64 data js  and used btoa   to convert the data that I needed and insert it into a  lt div gt  so I could copy it    var base64 data    U1FMaXRlIGZvcm1hdCAzAAQA     lt snip lots of data gt  AhEHwA       and then included the data in the html like normal javascript    lt div id  test  gt  lt  div gt    lt script src  base64 data js  gt  lt  script gt   lt script gt      data   atob base64 data       var sqldb   new SQL Database data          Database test code from the sql js project     var test   sqldb exec  SELECT   FROM Genre        document getElementById  test   textContent   JSON stringify test    lt  script gt    I imagine it would be trivial to modify this to read JSON  maybe even XML  I ll leave that as an exercise for the reader

User · Answer

use the  web server for chrome app    you actually have it on your pc  wether you know or not  just search it in cortana    open it and click  choose file  choose the folder with your file in it  do not actually select your file  select your files folder then click on the link s  under the  choose folder  button   if it doesnt take you to the file  then add the name of the file to the urs  like this      https   127 0 0 1 8887 fileName txt   link to web server for chrome   click me

User · Answer

If you only need to access the files locally then you can include the exact path to the file  rather than using    images img jpg  use C  Users username directoryToImg img jpg  The reason CORS is happening is because you are trying to traverse to another directory within a webpage  by including the direct path you are not changing directory  you are pulling from a direct location

[jquery] XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)

Examples related to jquery

Examples related to xml

Examples related to xslt

Examples related to cors

Examples related to xmlhttprequest