I have been searching for almost 2 hours to find a way to read a csv file that is hosted online. My data is hosted here.
I came across a library called papa parse. It apparently allows me to do that. I have the following code
Papa.parse("http://bahadorsaket.com/others/ranking.csv", {
download: true,
complete: function(results) {
console.log("Finished:", results.data);
}
})
It returns me following error: *
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
I was wondering if I am doing something wrong. OR there is a different way to load a csv file that is hosted online.
Thanks
There is chrome extension which can resolve this CORS error
Link :
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Also you can start the chrome with below line which can also resolve it
chrome.exe --disable-web-security
This is for windows btw
Hope this helps
It is not that you are doing anything wrong, its that the remote URL doesnt allow cors and your browser will deny any traffic to remote origins. The safer option would be for you to make that call server side to get the csv and have papa.parse call a local endpoint.
Related
I've written a small piece of JS to feed numbers into my HTML on my website. It worked when I ran the files locally, but when I uploaded it to my hosting, Lithium, my D3 code is throwing this error:
XMLHttpRequest cannot load https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://alanhovorka.com' is therefore not allowed access.
I've read some of the answers on here, but they don't seem to directly address when D3 pulls in data from a Google Sheet published to the web as a CSV. I've seen mixed responses about whether CORS works with D3 and if I need to use tabletop. My knowledge of CORS is limited, but it seems like it would be the simplest the solution. Also, I've never been able to get tabletop to work and I've read concerns about its long-term viability.
Here's my JS with the spreadsheet call:
The website is alanhovorka.com
d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", function(error, data) {
d3.select("#requests").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
return d.rqt_count;
});
d3.select("#agencies").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
return d.agency_cnt;
});
d3.select("#records").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
return d.records_obt_cnt;
});
d3.select("#pages").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
return d.pg_cnt;
});
});
Thanks!
My knowledgeof CORS is limited, but it seems like it would be the simplest the solution.
It isn't. You don't control Google's servers, so you can't add those headers to the response.
You'll need to either use a proxy or get the data through the API instead.
I have two of the same site. My 1st site is http://educationaboveall.org/ and the 2nd is http://www.savantgenius.com .
1st site is loading properly on every device without any error but the 2nd (www.savantgenius.com) site is not loading properly in mobile and table devices. It is only loading properly in desktop browser. I have also found 32 console error.
Are there any jQuery issues? And please tell me how to be able to fix it.
I'm getting the "XMLHttpRequest cannot load
file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html.
Cross origin requests are only supported for HTTP." and "Error: Failed
to execute 'send' on 'XMLHttpRequest': Failed to load
'file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html"
error, but I don't know what's causing it nor how to fix it.
Please see the screenshot - http://prntscr.com/4fm0d8
I Think that you should call it from a http webserver and not like simple file in browser. This mean request a file in a web server like http://localhost/XML/catalog.html not from file:///E:/Projects/XML/catalog.html.
It is as the message says:
cannot load file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html. .
You are referencing to a file on a Windows boxes filesystem and not in a webservers folder.
Second: you have a CORS-issue (which in this case is caused by the filesystem reference)
Cross origin requests are only supported for HTTP
See MDN for more infos.
To solve the issue, you have to configure your webserver to allow such requests. Check your webservers manual.
I had the same problem with my InfluxDB connection and it turns out I did not prepend the URL settings in the datasource with 'http://'. This could be nicer in Grafana, e.g. mentioning there is no protocol defined for accessing the source.
In your case it's clear that you somehow configured Grafana to look for D:\, which is not accessible for your browser. So check your data source URL.
Final product: take a file called theFile.txt which is saved with the js and HTML file and have it broken up by line into an array.
Problem: Works fine in Firefox but revives the following error in Google Chrome:
XMLHttpRequest cannot load file:///C:/Users/(my name)/Documents/testFile/theFile.txt. Received an invalid response. Origin 'null' is therefore not allowed access.
Javascript code:
$('#infoStore').load('theFile.txt', function(result) {
text = result;
console.log('here: '+text);});
HTML code for infoStore:
<div id="infoStore" hidden="true"></div>
Thank you in advance for your assistance. I will be online to answer questions often.
That's because Chrome treats all origins using the file: protocol as being different from each other, and so the Same Origin Policy comes into play. It's just a security choice distinction between Chrome and some other browsers.
You basically can't use ajax with local files served via the file: protocol. (In Chrome.)
You could read the file using the File API (this answer shows how), but of course that has limitations (not least that the user has to give you the file to read, either via <input type="file"> or drag and drop).
This happens because of Same-Origin-Policy. You should load that file from webserver, not from local directory.
If you want to access local file in chrome ??
Sometimes it’s cool to debug and test javascript applications in Chrome but you want to read / write to local files. Example: you’re looking to use ajax and do a $.getJSON(‘json/somefile.json’). Chrome by default won’t allow this and will throw an error similar to
Failed to load resource: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
Origin 'null' is therefore not allowed access.
Or
XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
header is present on the requested resource.
Origin 'null' is therefore not allowed access.
Chrome does have a switch to enable this, it’s quite easy to turn on. You’ll need to make sure Chrome is closed completely, and run chrome with the ‘–allow-file-access-from-files’ flag. Ie:
C:\Users\<user>\AppData\Local\Google\Chrome\Application>
chrome --allow-file-access-from-files
Or you should be able to run:
%localappdata%\google\chrome\application\chrome --allow-file-access-from-files
I’ve made the below into a .bat file I use, if you find it helps.
start "chrome" %localappdata%\google\chrome\application\chrome --allow-file-access-from-files
exit
To see if the flag is set, you can visit: chrome://version/ and look at the Command Line section and you should see –allow-file-access-from-files
You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.
REF: Reference Link -Allow Local File Access in Chrome (Windows)
I am parsing a json file in my Javascript code like below.
$.getJSON('file:///dashboard.json', function (json) {
However, it throws
XMLHttpRequest cannot load file:///dashboard.json. Cross origin requests are only supported for HTTP.
I've been looking for solutions for almost 7 hours collectively, but most suggestions were to use this:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
or
open -b com.google.chrome --args --allow-file-access-from-files
and even when I opened Chrome with the second command, the same Cross origin request error is thrown.
The first command does not even run, as you can see below.
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
[708:1287:0401/174956:ERROR:process_singleton_mac.cc(103)] Unable to obtain profile lock.
$ [0401/174957:ERROR:mach_broker_mac.mm(152)] Failed to look up named parent port: 0x44e unknown error code
I tried launching a server with this file, on port 8000, and accessing it by providing url http://localhost:8000/dashboard.json, but it does not fix Cross origin request error. (My web app runs on port 8080).
What is the problem? How can I fix this?
Please help me. Thank you.
Different port number cause the cross origin issue as well:http: //localhost:8000 access a json file which is from http: //localhost:8080. There are various ways to resolve cross-origin resource accessing issue, such as CORS, Server-proxy and JSONP.
I think you could try to use JSONP to solve this issue in your case.
Step 1: Update the dashboard.json and change the file type to javascript. (Refer to this doc if you want to know how JSONP works)
//assume that the json data looks like this {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]}
var data = {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]};
onGetDashboardJSON(data);
Step 2: Use $.ajax to fetch cross origin json data in JSONP way
$.ajax({
url: "http://localhost:8080/dashboard.js",
dataType:"jsonp",
success: function(response){
},
error: function(response){
}
});
function onGetDashboardJSON(result){
//do anything you want with the JSON
console.log(result);
}
Hope this helpful.
I'm learning JavaScript, and by now I'm stuck in a problem that I'm not understanding. This problem is related with jQuery.get, CORS, jQuery.getJSON and JSONP.
Let's say that I'm writing an html file with some scripts which is accessing to a URL with some JSON content. The html file is in my local file system, and looks like this:
<!DOCTYPE html>
<head>
<title>Test</title>
<script src = "test.js"
charset = "UTF-8"></script>
<script src = "jquery/jquery-1.9.1.js"
charset = "UTF-8"></script>
</head>
<body>
<h1>Test</h1>
<script type="text/javascript">
queryAuctionFiles('eu', 'tyrande');
</script>
</body>
The function queryAuctionFiles, called in the body script tag, is the following:
// File: test.js
function queryAuctionFiles(realm, server)
{
var url = 'http://' +
realm +
'.battle.net/api/wow/auction/data/' +
server;
jQuery.get(url, function(data)
{
alert( "Eureka!" );
});
}
Opening the html with my Chrome browser (V 32.0.1700.76 m) the following error occurs:
XMLHttpRequest cannot load http://eu.battle.net/api/wow/auction/data/tyrande. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Googling around I was able to learn that this error is due that the resource acquisition from some domain (my local file system) to another (eu.battle.net) is forbidden due to security reasons.
I’ve also read that this cross domain requests could be achieved with CORS, but if I’m not mistaken, this CORS stuff must be enabled in both sides of the petition; in my case: my Chrome must support CORS and eu.battle.net must have it enabled, how can I can find out if some domain supports CORS?
While looking for a solution for my problem, I’ve found about the jQuery.getJSON method, so I’ve gave it a try, but the result was the same, the following code:
jQuery.getJSON(url, function(data)
{
alert( "Eureka!" );
});
Produces the same No 'Access-Control-Allow-Origin' error, at first, I was thinking that the error is produced because the given url isn’t a JSON file, but it is without doubt a cross domain error. When I was thinking about giving up, I’ve read about JSONP and how it is managed by jQuery:
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.
So, I made the following change:
jQuery.getJSON(url + '?callback=?', function(data)
{ //^~~~~~~~~~~~~
alert( "Eureka!" );
});
And after that, I get a different error:
Uncaught SyntaxError: Unexpected token :
And, the file name where the SyntaxError is marked is tyrande on line 1, the contents of this tyrande file looks like this:
{"files":[{"url":"http://eu.battle.net/auction-data/d5357dc91898b3f78edfd1fbbe8867e8/auctions.json","lastModified":1390475765000}]}
This contents are the input I was expecting in the anonymous function passed as second parameter to getJSON!
It seems that the getJSON has downloaded a file named tyrande, from the url provided, and then eval() its contents, this contents are a JSON input and therefore, isn’t a valid JavaScript evaluable string.
Now that I’ve explained in detail what have I tried, and knowing my goal, lemme ask:
In order to acquire remote resources, it matters if the html file is in my file system or into a remote server?
Is the CORS something that must be enabled? how do I enable it on my scripts? how I must test if a remote resource supports CORS?
If I’m using jQuery.getJSON, it matters if the resource address isn’t a JSON file?
What is that I’m doing wrong in my last change? why is a file named tyrande being downloaded and then its contents being eval()uated?
Thanks for your attention
It is impossible. Cross domain policy won't allow you to fetch a file from different domain.
Check this one out