0

I have a small web app that consumes data from an XML file to display. It's basically just 3 files:

app.html
logic.js
data.xml

The javascript file loads the XML data and processes it:

$.get('data.xml', {}, processResult);

I would like this little app to be able to run when launched locally with the file:// protocol. However I am getting the following error:

Access to XMLHttpRequest at 'file:///C:/.../data.xml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Basically I need a way for javascript to request another file in the same directory. Is this possible? I can make any changes to the JS or HTML files but the XML file comes from a vendor and it would be a pain to modify it each time (e.g. to wrap it in JSON or JSONP).

Improve this question
5
  • 1
    No you can't do that. Just use a local web server. Browsers really don't like web pages touching the file system. Commented Feb 21, 2021 at 1:51
  • @JaredSmith : my use case requires users to be able to load these files on their computer, so a local a web server is a no-go. As I said in another comment it's weird that I can load javascript files locally with <script src="logic.js"></script>. Obviously I understand that you don't want an http site to poke around on the file system but that is not really the case here, the browser is already opening local files. Commented Feb 21, 2021 at 2:29
  • "my use case requires users to be able to load these files on their computer" then you're going to have to use something other than a webpage. "Obviously I understand that you don't want an http site to poke around on the file system" yes, exactly, so you aren't going to be able to use it to poke around on the file system. In addition to the sandboxing issues you're going to find that a lot of stuff (e.g. mouse events) won't work correctly when executing with the file:// protocol. Commented Feb 21, 2021 at 3:01
  • @JaredSmith I suppose in a perfect world I would have the time to port the app to Electron or something. But this is an internal business app and I have to be pragmatic. I have decided to just wrap the XML as a javascript string, e.g. var xml = '<?xml>...'; and then load it via <script src="data.xml.js"></script>. It's dumb but it works over file://. Commented Feb 21, 2021 at 3:18
  • Sometimes you just have to hack it, no shame. Seriously though watch out for the mouse event thing, I see that pop up as a question here pretty regularly. Commented Feb 21, 2021 at 14:59

1 Answer 1

Reset to default
2

Most modern browsers have a security policy where you're not allowed to do certain things in javascript via file://

If you want to run your app locally you can write a simple http server in node, go, or whatever or just install one like https://www.npmjs.com/package/http-server

Then you can access it via http://localhost:

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Just seems weird that I can load javascript files via file:// using <script src="logic.js"></script> but I can't get other resources that way.
I think it's to prevent js code from remote websites from accessing a user's file system via file://. I'm guessing you can't access files with javascript but you can load js or other files because those file names are explicitly stated in the html.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.