Call Google App Scripts - javascript

I have already published a app script, and I test the query string in the browser, and it works well. I would like to send a xmlhttprequest to the script, but it shows =>
XMLHttpRequest cannot load https://script.google.com/macros /s/XXXXXXXXXX/exec. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://docs.google.com' is therefore not allowed access.
This is the app script code:
function doGet(e){
Logger.log(e.parameter.id);
//other function
return ContentService.createTextOutput("Hello World");
}
Here is the client code:
$.ajax({
url:'https://script.google.com/macros/s/XXXXXXXX/exec',
method:'POST',
data:{
id: "123123"
},
success:function(){
console.log("success");
}
});

There are a few possibilites, and I have ran into this error before myself. As I have insufficient reputation to comment and ask for clarification, I will write the most probable cause.
This problem has 2 parts - You can't post (unstringified) objects, and errors on google apps script do not have CORS headers
solution: stringify and parse the object
Without converting the object to a string, your browser will just send [Object object] and not the information.
This will cause an error on your script, and error messages by Google Script are HTML webpages that don't have CORS headers, which triggers the CORS error that does not really tell you the true problem
To be able to successfully POST the parameters, you have to convert the object to a string (e.g. by using JSON.stringify()), get the value through e.postData.contents on your google apps script, parse it, before you can use it as if it were an object.
I personally found when I read that I can't send raw objects in javascript - pass object via post
You mentioned that the code worked when you tested it using the query string in your browser, however, it is different as that will be a GET request and will trigger doGet instead of doPost
this is the most probable explanation and hope it helps!
Do test your code with default values before deploying it as once you deploy your code it can get very troublesome. You can use https://hurl.it to see what actually comes out without cors errors in the way.

Related

How can you fetch json from an external url with javascript and/or jquery?

I'm trying to get some json from this url : http://api.conceptnet.io/query?rel=/r/UsedFor&limit=3
I have a button that calls the function "jsonplz()" which is supposed to give me an alert with the fetched json.
My javascript looks something like this :
<script src="http://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
function jsonplz(){
$.getJSON("http://api.conceptnet.io/query?rel=/r/UsedFor&limit=3?callback=?",function(json){
console.log(json);
});
}
</script>
As you can see, I'm trying to fetch is as jsonp, hence why I added " ?callback=? " at the end of the url, otherwise if I was trying to get it as json, my browser would have blocked me.
Here's the problem : it still doesn't work. I get this error on the firefox console when I call jsonplz() :
Warning : The script from “https://api.conceptnet.io/query?rel=/r/UsedFor&limit=3?callback=jQuery331030366838930478535_1646253265514&_=1646253265515” was loaded even though its MIME type (“application/json”) is not a valid JavaScript MIME type.
Error : Uncaught SyntaxError: unexpected token: ':'
Any solution to either solve this error or any other way to retrieve json from an external url without downloading additional third party software is appreciated
As you can see, I'm trying to fetch is as jsonp, hence why I added " ?callback=? " at the end of the url
The server doesn't support JSONP (and shouldn't, it is a dirty hack with security issues and we have CORS now).
Either:
Change the server to support JSONP (not recommended; see above)
Remove ?callback=? and change the server to grant your JS permission to read the data using CORS
Don't fetch the data directly from the client (e.g. proxy it through your own server).

GetAddress.io and 'No Access Control Allow Origin' error

I'm trying to use getAddress.io, and while the syntax is very simple, I'm trying to write my backend management that can get whitelisted domains and usage etc.
So here is my call in jQuery:
$.ajax({
url: " https://api.getAddress.io/v2/usage",
context: document.body,
method: "GET",
data: {"api-key": getAddressAPIKey}
}).done(function(results) {
$("div.usage").append(results);
});
All seems to be up to scatch. However it returns the following error:
Failed to load https://api.getaddress.io/security/ip-address-whitelist?api-key=[apikey]: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://admin.awme.local' is therefore not allowed access.
What am I doing wrong? I understand what the error is about as I've written my own APIs but this is a public API that I obviously dont have control over - and so therefore I cannot modify their code to allow me access. This is a paid for service so I should just be able to query it and get my data back. Why am I getting this error?
You need to whitelist either your domain(if you are accessing the API from client), or your server IP if using backend.
https://getaddress.io/Documentation#domain-whitelist
Just make a simple post request with you admin-key(NOT API KEY) the params(NOT IN BODY) and your domain name in the body and set Content-Type to application/json.
Here is an example request with the response using postman.
The problem is that the API has CORS set up. Try adding dataType: "jsonp" as a parameter in your AJAX request. If that doesn't work, try using something like https://cors-anywhere.herokuapp.com/
You cannot query directly from the browser, you have to query through a proxy like nginx or apache. You throw your request to the proxy and the proxy passes them to the other public API
May be the return type from the controller was not provided , This error mostly occurs when
return type is not mentioned or kept as dynamic and if the return type object contains any child elements .Just mention a proper return type.
The URL in your error message:
'https://api.getaddress.io/security/ip-address-whitelist?api-key=[apikey]'
..is not related to the code you have provided.
I assume there is more code in in your page that uses the above URL?
Did you read its document? I'm not familiar with this getAddress.io, but it seems you have to add your domain and IP to its whitelist.
Checkout Domain Whitelist and IP Address Whitelist

Receive XML response from Cross-Domain Ajax request with jQuery

I trying to make an ajax request to another domain, it already works, but now I have another problem...
This is my code:
function getChannelMessages(channel) {
jQuery.support.cors = true;
$.ajax(channel, {
cache : true,
type : "get",
data : _channels[channel].request,
global : false,
dataType : "jsonp text xml",
jsonp : false,
success : function jsonpCallback (response) {
console.log(response);
updateChannelRequest(channel);
//getChannelMessages(channel);
}
});
}
As I said, it already works, but the problem is the server returns an XML (Is not my server, is another server from another company - a web service - so I can not change what it returns) and as jsonp expects an json it fails with the error:
SyntaxError: syntax error
<?xml version="1.0"?><ReceiveMessageResponse xmlns="http://q ... />
According to jQuery documentation, adding jsonp text xml should make the magic, converting the response to simple text and then parsing it as XML, but it does not works.
I was already able to make it using YQL, but it has a limit of 10,000 requests per hour, and the system I'm developing will have up to 10 million request per hour. For that same reason, I can not "proxy" in my own server those requests...
FYI: I'm trying to get the newest messages from SQS, so if there is anyway to tell it to return the data as json, it will be easier and better, but I have not find anything either in the documentation...
The plain answer to my question is this: There are only two ways of do this:
Use a proxy. I won't put here all the how-to's to make it, but you can find a lot of information in the web searching for "cors" "cross domains ajax requests" and "yql" (this last is a proxy by Yahoo)
Use CORS. This is Cross-Origin Resource Sharing. That is: activate the server from which you want to get information to sent information to any other domain and to answer to requests from any other domain. To do this you must be the one who manage the server/service.
Those two are the only ways of getting information XML (or any other format) from another domain. To make json cross domain requests:
Use jsonp (Json Padded). I won't explain this (and actually is just extra information since it won't work if the answer from the server is XML - my main problem), cause there is a lot of information on the web.
Unfortunately I was not able to accomplished my goal, cause SQS is not configured to any of this methods... Still, I've got plenty insight of how Cross-Domains Requests works. And I hope this help anyone...

External HTML retrieval

I am trying to get the contents of http://en.wikipedia.org through an ajax call. For this, I am using jQuery. Here is the code:
jQuery.ajax({
url:"http://en.wikipedia.org",
crossDomain: true,
dataType: "jsonp",
jsonpCallback: "myCallback"
});
function myCallBack(data){
console.log("ok");
}
The problem is that I get in Firebug this error:
SyntaxError: syntax error
<!DOCTYPE html>
So I would say that the html content is fetched, although the callback function is not run. At some point it encounters the specified tag, throws this error and stops running the script.
Do you have any idea where the problem might lie?
Is there any other way to get the contents of a html page? I do not want to use iframes, because that means I will not be able to use or modify its contents.
Its because you're Ajax function expects a json response from the provided url and it gives an html response, thats the reason you are getting a syntax error, the same error you will get from the Chrome debugger as well.
Updated:
What you're trying to do is called a Cross-Domain Request.
"For security reasons scripts aren't able to access content from other domains. Mozilla has a long article about HTTP access control, but the bottom line is that without the website themselves adding support for cross-domain requests, you're screwed."
Reference
Solution:
You can resolve this issue by having a backend script which will the external pages for you. Like a proxy server, which resides the same domain, so you wont have to face the Cross domain issues.
And you can load them, by
$.get(url, success: function(data) { // the url that will fetch the external html page for you, located on the same domain
console.log("ok");
});
Your issue your having here is that you are calling across domains. Allthough you seem to have realised this and are using jsonp for your request, the document you are trying to pull ie wikepedia is not a jsonp document. So as soon as the ajax finds the html tags it will throw an arror, as you have defined that you are expecting a jsonp response.
You cannot just pull other websites data across domain with javascript due to the cross domain issues, if you want to accomplish what you are doing here you will need to use a back end language to get the data.
Usefull link is http://json-p.org/
Hope that helps

Data feed from Google Docs API

I am trying to use the Google Docs API to get spreadsheet data as XML, and eventually JSON data. I have put the URL (http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values) in my browser, and I get the data, even when not logged in to Google.
When I try with jQuery Ajax, I get the "page not found" error.
$.get('http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values', function(data) {
console.log(data)
});
I am guessing that same origin policy might be the cause of the Ajax error, so I tried with PHP, but I get the error.
echo file_get_contents("http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values");
I am aiming to get the Google Docs spreadsheet data into a JSON object for use on a webpage.
How can I fix this error?
You have to be logged in in order to be able to retrieve the spreadsheet data.
Visiting http://spreadsheet.google.com/.../private/values while logged in results in a meaningful XML page. Trying to load the same page when not logged in, however, results in a "Page Not Found".
According to the response header from the JQuery response, the only cause of this error is not being logged in (shown below).
WWW-Authenticate: No credentials were included in your request.
See The Protocol Guide for the relevant documentation.
Supposing you double-checked your URL string, the reason could be same origin policy. You cannot fetch data from a different domain due to browser's strict security policy.
If you want to get past this, you need to use a different approach, such as JSONP.
You can read more about how to implement JSONP in jQuery on the Ajax documentation page.

Categories