Develop Reference

How can I get html files by JavaScript?

I want access html file in "https://www.setgame.com/set/puzzle" by JavaScript but I cannot.
I will show the JavaScript code what I make and the error log.
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('<title>(.*)?</title>')[1];
}
// Make the actual CORS request.
function makeCorsRequest(url) {
// This is a sample server that supports CORS.
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
alert(xhr.status)
var text = xhr.responseText;
alert(text)
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
};
xhr.onerror = function() {
alert(xhr.responseText)
alert('Woops, there was an error making the request.');
};
xhr.send();
}
makeCorsRequest("https://www.setgame.com/set/puzzle")
Chrome shows the following errors.
Failed to load resource: the server responded with a status of 404 (Not Found)
Access to XMLHttpRequest at 'https://www.setgame.com/set/puzzle' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If you want to send CORS request successfully, origin server (in this case, setgame.com) must allow CORS request. (With Access-Control-Allow-Origin header)
This means, you can't access CORS-blocked server by browser-side javascript.
Try use node.js (server-sided things)

How to use CORS in Javascript?

How do I use CORS for data retrieval from a HTTPS URL to localhost in JavaScript? The URL is a Service-Now incident list that I need to process as a JSON object.

Here is how you do it, provided server side configurations are done:
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('<title>(.*)?</title>')[1];
}
// Make the actual CORS request.
function makeCorsRequest() {
// All HTML5 Rocks properties support CORS.
var url = 'http://updates.html5rocks.com';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
This is from: http://www.html5rocks.com/en/tutorials/cors/

CORS is a server side feature that the new browsers support.
When you request a resource from a cross domain service, the browser performs a preflight request to the server and asks him for access information.
If the server allows you to access it's resource from a different domain, it will send back some HTTP headers and the browser will decide upon those headers about your actions.
Read more here.

Call Marketo API using javascript only

I'm currently trying to retrieve and send data from Marketo's API. The problem is : my web platform is Salesforce Community. If I understand correctly this web tool, I'm not allowed to use anything else than pure javascript.
I've built a CORS request like this :
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function makeCorsRequest() {
var url = document.getElementById('url').value;
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
xhr.onload = function() {
var text = xhr.responseText;
alert('Response from CORS request to ' + url + 'is : ' + text);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
With the help of http://www.html5rocks.com/en/tutorials/cors/, but the server doesn't seem to accept the request since this error comes back :
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://testurl…' is therefore not allowed access."
Does anyone know if Marketo's API accepts CORS requests? Or maybe have an idea that would help me solve this? Thank you very much.

The Marketo REST API will not allow CORS requests. Making a call on the client-side in the browser is a security risk as well, since you'll expose your access token. Depending on what you're trying to do there may be alternatives, or you could set up a simple service to proxy your requests.

Is it possible to fetch data from an RSS Feed without an Access-Control-Allow-Origin header?

I have to fetch data from a RSS feed but the problem is that there is no Access-Control-Allow-Origin header to permit us to read data.
I have tried:
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
// if ("withCredentials" in xhr){
if (xhr.withCredentials == true){
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function fetchData() {
var request = createCORSRequest("get", "http://example.com/data");
if (request){
// request.onload = function() {
// console.log(request);
// };
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
};
request.send();
}
}
But it still has this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I have also tried Ajax but still not working. Is there any other way?
Please note that we are not allowed to use jQuery or any other plug-ins and framework. It has to be written only in JavaScript. Please don't ask why as it is a topic that even I can't answer.

XDomainRequest (CORS) for XML causing "Access is denied" error in IE8 / IE9

Apologies if this appears to be a duplicate but I cannot see a clear answer to any of the similar questions.
When trying to do a CORS request for some XML I continually get an "Access is denied" JS error from IE8.
My code is adapted from this example:
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('<title>(.*)?</title>')[1];
}
// Make the actual CORS request.
function makeCorsRequest() {
// All HTML5 Rocks properties support CORS.
var url = 'http://updates.html5rocks.com';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
from http://www.html5rocks.com/en/tutorials/cors/
This should work in IE8 using XDomainRequest, and when I load the example page and click "Run sample" on the html5rocks page, it works in IE8. However, as soon as I copy the code to my own page and run, I get the "Access is denied" error on the xhr.open() line inside XDomainRequest.
This one has me really baffled - the server is definitely set up correctly so it's something to do with the frontend. Thanks in advance to anyone who can help!

OK, the problem was down to weirdnesses in IE8 & 9 which were solved with a few suggestions from this article: http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/ (mainly setting some blank handler functions and wrapping the .send() in a 0 timeout).
Here's my final code which works in ie8/9/10/11 & FF/Chrome:
function doRequest(url) {
// Create the XHR object.
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open('get', url, true);
}else if(typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open('get', url);
}else{
// CORS not supported.
xhr = null;
};
if (!xhr) {
return;
};
// Response handlers.
xhr.onload = function() {
//do what you want with the response. Remember to use xhr.responseText for ie8 compatibility, because it doesn't have .responseXML
if(xhr.responseXML) {
xml = this.responseXML;
}else if(xhr.responseText){
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.loadXML(xhr.responseText);
};
};
xhr.onerror = function() {
//do what you want on error
};
//these blank handlers need to be set to fix ie9 http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/
xhr.onprogress = function () { };
xhr.ontimeout = function () { };
//do it, wrapped in timeout to fix ie9
setTimeout(function () {
xhr.send();
}, 0);
};