im trying to load an image with p5.js loadImage(image);.
Im using the p5 library on my desktop.
Im not using the browser editor when im using the browser editor it handles the loading just fine
but im getting 2 errors the first one says
Fetch API cannot load
file:///C:/Users/3worl/OneDrive/Skrivebord/G_O_E/planet.jpg. URL scheme
must be "http" or "https" for CORS request.
the second one says
p5.js:65680 Uncaught (in promise) TypeError: Failed to fetch
Your error message is pretty explicit:
Fet API cannot load file:///C://..... URL scheme must be "http" or "https"
You are trying to access a file like you would do in the window file explorer with the path file:///C://... which doesn't work in javascript code.
If you look at the loadImage() doc you'll read:
The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.
So let's say that your sketch is located on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/sketch.js and your image on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/assets/planet.jpg you will need to use loadImage('assets/planet.jpg') i.e. using the path of the image relative to the sketch.
Note that if you could also use an URL if the image is hosted online, like loadImage('https://earthsky.org/upl/2018/01/planet-artist.jpg') but that require that you host your image online which will require a webserver or an hosting service.
Is there a way i can define my script tag to use absolute path instead of relative path so that my JavaScript files are loaded from a network location?
This is what i have tried:
<script src="file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js"></script>
This does not work. in FF, i get the error Security Error: Content at http://localhost/Test/Test.html may not load or link to file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js
In IE, I dont see the file being downloaded. In Network Tab (IE Dev Toolbar), it shows Received 0 B. If i take the URL and paste it in the File Explorer, it opens the JS file.
What am i missing here?
You are indeed running up against the security model of the browsers. The only way around this is to run a web server locally and serve up the files that way.
I choose an image from the window that open up by clicking a button. Then I display the selected image. I am creating a div, then I create an image element. I get the source of the image from the uploaded file source and then append it in the div. It works fine without any server, But the window prompts for blocked contents and I allow it. But when i run it on the server, the image doesn't show up! Even no permission is asked! Everything works fine in chrome and firefox!
Here is some code,
if(document.all) {
var image = document.createElement("img");
image.src = document.getElementById('fileElem').value;
}
thumbnail.appendChild(image);
This would have worked in older browsers because traditionally <input type="file" /> had a value attribute that returned the full path to the specified file in the local filesystem. However since around 2006 (think IE7+, Firefox 2+, Chrome, etc) browsers no longer provide the full file path, they only provide the file's name without directory information. This is to protect the user's privacy (because uploaded "My Documents" files might contain the user's real-life name, for example).
This affects both uploaded files (the browser no-longer sends the full file path in POST requests, so server-side code only get the filename and file data) as well as local scripts (as you're experiencing yourself).
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?
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
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 http.server
[Edit Thanks #alextercete, for pointing out that it has updated in Python3]
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;
});
What about using the javascript FileReader function to open the local file, ie:
<input type="file" name="filename" id="filename">
<script>
$("#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));
}
});
</script>
Now Click Choose file button and browse to the file file:///C:/path/to/XSL%20Website/data/home.xml
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) & switch & " > /dev/null 2>&1 &"
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).
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 <div> so I could copy it).
var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";
and then included the data in the html like normal javascript:
<div id="test"></div>
<script src="base64_data.js"></script>
<script>
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);
</script>
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 ;)
You can try putting 'Access-Control-Allow-Origin':'*' in response.writeHead(, {[here]}).
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
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.
Saw a similar question at Download a file using Javascript but this one is specific to IE and I'm using extjs and alfresco (opsoro). I can get a download prompt for text files fine in Opera, Chrome, and Firefox, but not IE.
Below is a list of what I've tried so far, which all work on other browsers except IE7.
document.location = downloadLocation;
window.open(downloadLocation,'Download');
location.href = downloadLocation;
When downloading other mimetypes (csv, xls), they download fine using any of the methods mentioned above.
You may need some help from the backend. Instead of serving the file statically, the backend app can load and serve the file contents with a content disposition header. That is guaranteed to invoke a download.
Content-disposition: attachment; filename=hello.txt
I don't know how you could do it with Alfresco, though.
Edit: Wait! Check this out: http://forums.alfresco.com/en/viewtopic.php?f=36&t=21356&p=70252