Custom Widget on portals Accessing external URL


#1

I Want to compare some of the data that I am uploading to portals, to some external data.
for example from this URL:

http://maine.loboviz.com/cgi-data/nph-data.cgi?newest=12&y=temperature&data_format=text&node=66

I am having trouble pulling data from that site but not this one:
https://ghibliapi.herokuapp.com/films

Here is my custom code:

var request = new XMLHttpRequest();

request.open(‘GET’, ‘https://ghibliapi.herokuapp.com/films’, false);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
console.log(request.responseText);
} else {
console.log(‘error’);
}
}

request.send();

Any help is appreciated.

Thanks

Joshua


#2

Hey Josh,

I know we covered this in a private support thread but I want to recap here what we found in case it is helpful for other users in the future:

We found that hitting the desired external API was failing because the API does not support a secure connection - connections out from a custom Portals widget must be secure. The workaround you implemented was to create a simple web server that acts as a secure proxy to the data and can be connected to from your widget.


#3

Hi Eli,

Yes, I was able to get this to work using https://cors-anywhere.herokuapp.com/ as a work around!

function( container, portal )
{
container.innerHTML="";
var data;
var cors_api_url = ‘https://cors-anywhere.herokuapp.com/’;
function doCORSRequest(options, printResult) {
var x = new XMLHttpRequest();
x.open(options.method, cors_api_url + options.url);
x.onload = x.onerror = function() {
printResult(
(x.responseText || ‘’)
);
};
if (/^POST/i.test(options.method)) {
x.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
}
x.send(options.data);
}
// Bind event

  doCORSRequest({
    method: this.id = 'GET',
    url: 'http://maine.loboviz.com/0066.wml',
    data: ''
  }, function printResult(result) {
    displayMessage(result);
  });

function displayMessage( message )
{
var h3 = document.createElement(‘h3’),
p = document.createElement(‘p’)
;

container.appendChild( h3 );
container.appendChild( p );
p.innerHTML = message;

container.style.margin = '5px';
container.style.color = '#42b0f4';

}

}