Skip to content

Instantly share code, notes, and snippets.

@ravisiyer
Last active March 30, 2024 09:56
Show Gist options
  • Save ravisiyer/1f11021dd4bacfe4771e5f14169396e4 to your computer and use it in GitHub Desktop.
Save ravisiyer/1f11021dd4bacfe4771e5f14169396e4 to your computer and use it in GitHub Desktop.
Barebones blogger blog feed to set of posts (book) using JavaScript and bypassing CORS using cors-anywhere.herokuapp.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<main id="main"></main>
<!-- <div id="bodydiv"></div> -->
<script src="script.js"></script>
</body>
</html>
// Modified version of https://github.com/hn-88/bloggerToEbook
// Dealing with CORS Errors in JavaScript,
// https://codedamn.com/news/javascript/javascript-cors-error-handling
// suggests proxy server written using Node express as a way to get around CORS
var corsAnywhereURL = "https://cors-anywhere.herokuapp.com/";
// Needs visit to https://cors-anywhere.herokuapp.com/corsdemo and
// click on "Request temporary access to the demo server" using
// same browser as used to load page running this javascript code.
// After that's done the CORS policy error gets resolved!
var forbiddenErrorMsg = `<p>Got 'Forbidden (403)' response.</p>
<p> You may need to visit <a href="https://cors-anywhere.herokuapp.com/corsdemo"
>https://cors-anywhere.herokuapp.com/corsdemo</a> and click on
"Request temporary access to the demo server".</p><p> Then load this page again.</p>`;
var blogURL = "https://sathyasaiwithstudents.blogspot.com/";
var searchLabel = "3.%20Conversations";
var contentHTML = "";
var mainElement = document.getElementById("main");
async function myFunction() {
var feedReqURL =
corsAnywhereURL +
blogURL +
"feeds/posts/default/-/" +
searchLabel +
"?max-results=2&alt=json";
// "feeds/posts/default/" +
// "?max-results=100&alt=json";
var options = {
method: "GET",
muteHttpExceptions: true,
headers: { Origin: blogURL },
};
var data;
var temp = feedReqURL;
console.log(temp);
try {
response = await fetch(temp, options);
console.log("response");
console.log(response);
if (!response.ok) {
if (response.status === 403) {
mainElement.innerHTML = forbiddenErrorMsg;
} else {
console.log(
"response.ok is false with response.status != 403! Aborting function!"
);
}
return;
}
let data = await response.json();
console.log("data");
console.log(data);
var contentHTML = "";
for (i in data.feed.entry) {
contentHTML +=
"<h1>" +
data.feed.entry[i].title.$t +
"</h1>" +
data.feed.entry[i].content.$t +
'<span style="page-break-after: always" />';
}
// console.log("contentHTML");
// console.log(contentHTML);
mainElement.innerHTML = contentHTML;
} catch (error) {
mainElement.innerHTML = error;
console.log("error");
console.log(error);
}
}
if (mainElement) {
console.log("Calling myFunction");
myFunction();
} else {
alert("main element not found! Aborting!");
}
@ravisiyer
Copy link
Author

ravisiyer commented Mar 30, 2024

This is a HTML/JavaScript modified (and simplified) version of Google Apps Script based https://github.com/hn-88/bloggerToEbook . Key feature of this program is bypassing CORS restriction/error using cors-anywhere.herokuapp.com. For more on latter, see section '4. Using CORS-anywhere' in https://codedamn.com/news/javascript/javascript-cors-error-handling . You can use the program by simply downloading the index.html and script.js files and then opening index.html in a browser.
Related blog post: Notes on bypassing CORS restriction (error) in JavaScript code that fetches blogger blog feed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment