CODEWITHSUNDEEP
javascriptajax
Hank
Hank

Reputation: 8477

Requesting files with javascript when using file:// protocol

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

Upvotes: 0

Views: 1319

Answers (2)

DWB
DWB

Reputation: 387

Fetch file:// without CORS errors c.2025

One way to develop locally without http required: Chrome (tested v132 64-bit on win 10) started with this flag:

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

A similar option was not found for Firefox 134 or Edge 132.

With Chrome started with --allow-file-access-from-files, it fetched local json, xml, and modules using file:// without CORS blocked requests.

Test

Use code below to build and place four files in the same local folder. Get app.html and fetch.js from "Run code snippet" and the other two follow.

data.xml:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

and test.json (format to taste):

{"countries":[{
   "name": "Indonesia",
   "capital": "Jakarata"
},{
   "name": "Philippines",
   "capital": "Manila"
}]}

and browse to your app.html. Open 'Developer tools' and look in console.

// Vanilla fetch.js from many authors smarter than me.
// jquery users will have to adapt this vanilla

// file:// with relative url
fetch("test.json")
.then(response => response.json())
.then(data => {
    console.table(data.countries);
});

// file:// with relative url
fetch("data.xml")
.then(response => response.text())
.then(xml => {
    console.log(xml);
});
<!DOCTYPE html><html lang="en">
<head>
<title>Fetch Local Files</title>
<meta charset="utf-8">
<!-- file:// is used here to load fetch.js -->
<script defer src="./fetch.js"></script>
</head>
<body>
<h1>c.2025 Fetch file:// without CORS errors</h1>
<h3>Note! "Run code snippet" won't work here, as it requires two local file system files to fetch. This html and javascript are for copy/paste to expedite local testing only. </h3>
<p>Open this html with Chrome browser started with --allow-file-access-from-files flag, then check console to see contents of fetch'd xml & json</p>
</body>
</html>

Upvotes: -1

jyand
jyand

Reputation: 51

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:

Upvotes: 2

Related Questions