I'm building a small webpage that gets data from several different rest API's (on different domain) and compares the data.
When I open the html file locally everything works fine, but when I upload to the server and try to open it, the data from 1 of the API's doesnt display and the firefox console gives me this error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
(other browsers display a different message but none of them display the api data)
this is the code for the request:
function ajax(url){
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
I have been reading up on xmlhttprequest and setrequestheader, but i cant seem to figure it out on my own.
-why is it that the httprequest to the rest api works locally but not from server? -what do i need to change to make it work?
