Loading Local Files in Firefox and Chrome
Tags: beginners, firefox, chrome, cors
Published: 2020-05-21 03:41:47

---
title: Loading Local Files in Firefox and Chrome
published: true
description: Doing local development without a server and *still* triggering CORS errors? Most browsers have a way to handle this.
tags: beginner, firefox, chrome, cors
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/36hk1cf99qkq3nseaot9.jpg
---

One of the many cool things about working in the browser is you can just drag and drop a local HTML file into it and see your work. No local server running or anything, just files and a browser, like Adam and Eve. But due to browser security settings, developing this way can still trigger CORS-related errors when you load in local files, such as an mp4. 

Let's see how to eliminate pesky CORS errors while doing this most foundational style of local development!

## The Problem
So, I just spent about 10 minutes trying to load in a local audio file, and I kept getting the following error in the browser console:
```
The HTMLMediaElement passed to createMediaElementSource has 
a cross-origin resource, the node will output silence.
```

In Chrome you may see something like:
```
MediaElementAudioSource outputs zeroes due to CORS access 
restrictions for file:///Users/dengel/code/experi/dengel.m4a
```

I tried a few things that did not work:
- adding the `crossorigin="anonymous` attribute to the `<audio>` tag
- passing in the absolute filepath to the .mp4

These attempts just ended up raising different errors. It turns out you need to look to the _browser settings_ to get past these errors.

## Fixing this in Firefox
In Firefox, first you need to navigate to about:config in the Firefox browser, search for the privacy.file_unique_origin setting, and set it from `true` to `false` by double-clicking it. Voila, super easy!

## Fixing this in Chrome

If you're working in Chrome it's a little more laborious and requires using the Terminal (I'm on a Mac, but judging from this StackOverflow post, [for PowerShell users it's not much different](https://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode)):

1. In the Chrome address bar, navigate to chrome://version
2. On this page, find and copy the value of "Command Line". It will look like `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`.
3. Open your Terminal and paste in the file path to the Chrome executable you just copied
4. If it's not recognizing the path, the spaces in the file path might need to be escaped with a forward-slash like `Google\ Chrome.app`
5. Before you hit enter, two more things to add to this command
6. Add the following flag to the end of your command: `--allow-file-access-from-files`
7. Finally, add the folder or file you want to open at the end, like `audio.html`

Your final command in Terminal will look something like this (assuming you're within your project folder):
```shell
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  
--allow-file-access-from-files audio.html 
```

If the command is successful, it should open up a Chrome window with your folder or file that you specified in the last step. 

One gotcha I encountered was I needed to close my already-open instance of Chrome for the `allow-file-access-from-files` flag to register. 

After that, my audio file was loaded and I got on my merry way. Hope this saves you a few minutes of searching!