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.
Related
my model (tf.keras.Sequential) was trained in Python, and I converted it into TF.js Layers format by using tfjs.converters.save_keras_model().
I created a server in folder (which contains *.bin files and a 'model.json'), using 'http-server' in cmd.
After that, I run this code to load the model:
(async () => {
const model = await tf.loadLayersModel('http://127.0.0.1:8080/model.json');
console.log('done');
})();
It doesn't work for me, these 3 errors appear in my console:
Access to fetch at 'http://127.0.0.1:8080/model.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET http://127.0.0.1:8080/model.json net::ERR_FAILED
Uncaught (in promise) Error: Request for http://127.0.0.1:8080/model.json failed due to error: TypeError: Failed to fetch
at tf.min.js:2
I have no idea how to fix it.
So this is an issue with CORS (Cross Origin Resource Sharing) - you need more than just simple web server to serve the files.
For any static files (like the bin and json files you have) that you want to use across domains on website etc you need to set the right header for those files by the web server so the browser knows its ok to use on such sites.
This is to do with web security across domains and whilst it catches a lot of folk out its important to have. Not sure what web server you are running but if you are using Express with Node.js then check this simple tutorial:
https://enable-cors.org/server_expressjs.html
or this lib:
https://medium.com/#alexishevia/using-cors-in-express-cac7e29b005b
Note the Allow-Origin part which is where you need to set the domain you plan to use it on. You can also use wildcard * to allow all domains if you want anyone to be able to use use those files on their sites too without issue.
Oh and fun fact, if you dont want to deal with a web server at all try Glitch.com which allows you to host experimental projects and upload assets if this is just for fun - it sets all the CORS headers correctly and is easy to use and prototype stuff on. https://glitch.com/#TensorFlowJS
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.
I have multiple websites that have RSS XML feed, and I want to use it for my Web App. I tried using Axios function (showed below).
axios.get('https://www.15min.lt/rss/sportas')
.then((response) => {
loading = false;
this.dataReceived = response;
console.log(response);
})
.catch((error) => {
loading = false;
this.errorReceived = error;
console.log({ error });
});
But all I got back is
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I tried to upload all project to the server because I found out that this error can be caused because of using it locally on the personal machine. But the result I got is the same, except instead of 'null' in error, I got my domain name.
I tried other Web App based on Vue.js to test or it's my side problem or website is just blocking any connection to RSS feed. But http://qreader.qcode.in web app worked with my links, and I'm sure it's possible to make it work. But I don't have an answer how to make it work.
In my project, I'm using Vue.js, Axios, and jQuery.
I found the easiest way myself. There is a website - https://cors.now.sh which helps to make these requests.
Just use it like in the example below:
XML Retrieve URL - https://cors.now.sh/https://example.com/rss-xml-link
I'm trying to use Angular to get two responses.
One, a response if the website uses green energy
Two, what are alternatives to this website.
app.controller('QueryController',['$http',function($http){
var site = this
site.green = []
site.alternatives = []
$http.get('http://api.thegreenwebfoundation.org/greencheck/' + 'www.apple.com').success(function(data){
console.log(data.result);
});
$http.get('http://www.similarsitesearch.com/api/similar/' + 'www.apple.com').success(function(data){
console.log("it worked");
}); }]);
As you can see both of these links provided JSON. But when I try to run this I get the following error:
XMLHttpRequest cannot load http://www.similarsitesearch.com/api/similar/www.apple.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I'd love any advice on the correct way to do this, thanks!!!!
This looks like a cross domain issue. Your browser will prevent ajax requests to other domains for security reasons.
You can research if these sites support CORS or can be fetched using JSONP. There are however some security concerns with JSONP especially if you are dealing with third parties.
Another alternative is to setup a reverse proxy on your own domain that makes the cross domain request.
TL/DR:
MSDN azure articles refer to going to the "Configure" section of the https://manage.windowsazure.com/ mobile services settings to add other URLS to CORS. It seems it isn't there anymore - any idea where it's gone?
The longer story for background:
Trying to follow this article:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-html-how-to-use-client-library/
and this linked one:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-html-get-started-data/
I have followed the article and created an azure mobile service with a sql server database (and 1 simple table in it.)
I then try to connect to it on my web server (localhost:8000/) with the js code:
var MobileServiceClient = WindowsAzure.MobileServiceClient;
var client = new MobileServiceClient('https://myappnamehere.azure-mobile.net/', 'mykeyhere');
I then make a call to query some data:
var table = client.getTable('mytablename');
var query = table.where({
complete: false
}).read().done(function (results) {
console.log(results);
}, function (err) {
console.log(err);
});
And the where call runs the error callback with the message:
"XMLHttpRequest cannot load
https://myappnamehere.azure-mobile.net/tables/tablename?$filter=(complete%20eq%20false).
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'localhost:8000' is therefore not allowed
access."
I'm guessing this is because although localhost is meant to be allowed in the server side CORS settings localhost:8000 isn't.
Trouble is, both articles above refer to going to the "Configure" section of the https://manage.windowsazure.com/ mobile services settings to add other URLS to CORS. It seems it isn't there anymore - any idea where it's gone?
All the other articles I look for talk about setting it in your config file etc. but the point is I don't want to push code to the server-side. That 1st article definitely implies that I can just create the service and the sql server table and then talk to it from javascript client-side (presumably automagically through the use of OData.) That is possible right or is that part of the article completely wrong too?!
If you're using the JavaScript (node.js) backend, then you'll see the list of cross-origin resource sharing (cors) domains. On the .NET backend, the support isn't baked in yet, but you should be able to add it by following the instructions to enable CORS for Web API (after all, the .NET backend is built on top of that platform).
Since you're accessing your service at localhost, I'm assuming that you're using the .NET backend, which is why you won't see the list of CORS domains in the portal. The integrated support should be coming in soon, but before that you can add the support manually as described in the document linked above.