Javascript is not able to load the list of HTML files in Static Website

Question

Javascript is not able to load the list of HTML files in Static Website

245 views Asked by skm At 26 April 2023 at 09:44

I have a static website, hosted on Azure (with free plan). The following is the structure of my website:

Goal: I want that the webpage all-travel-blogs.html display the titles of all the travel blogs present inside the folder travel-blogs. To achieve this, I have the following javascript present in the file bloglist.js file:

function getBlogList() {
   var blogsFolder = './travel-blogs';
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
               var blogList = document.getElementById('blogList');
               var blogFiles = xhr.responseText.split('\n');
               var blogHTML = '';
               for (var i = 0; i < blogFiles.length; i++) {
                   if (blogFiles[i]) {
                       var blogTitle = getBlogTitle(blogFiles[i]);
                       var blogIntro = getBlogIntro(blogFiles[i]);
                       blogHTML += '<div><a href="' + blogsFolder + '/' + blogFiles[i] + '">' + blogTitle + '</a><p>' + blogIntro + '</p></div>';
                   }
               }
               blogList.innerHTML = blogHTML;
           } else {
               console.error('Failed to load blog files');
           }
       }
   };
   xhr.open('GET', blogsFolder, true);
   xhr.send();
}

function displayBlogList() {
   getBlogList();
}

function getBlogTitle(blogFile) {
   // Extract the title from the file name
   return blogFile.substring(0, blogFile.indexOf('.html'));
}

function getBlogIntro(blogFile) {
   // Get the first <p> element from the blog file
   var xhr = new XMLHttpRequest();
   xhr.open('GET', './travel-blogs/' + blogFile, false);
   xhr.send();
   var blogHTML = xhr.responseText;
   var parser = new DOMParser();
   var doc = parser.parseFromString(blogHTML, 'text/html');
   return doc.querySelector('p').innerHTML;
}

Code of the HTML Page to list all Travel blogs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Travel Blog List</title>
    <script src="./bloglist.js"></script>
</head>
<body onload="displayBlogList()">
    <h1>Travel Blog List</h1>
    <div id="blogList"></div>
</body>
</html>

PROBLEM: Since, the webpage was not displaying the list of blogs, I opened the Inspect webpage and found that I am getting following errors:

Access to XMLHttpRequest at 'file:///C:/github-client/Website/Eterna-Bootstrap-Theme-based-website/blogs/blogs/travel-blogs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

UPDATE:

As per the suggestion, I installed the Live Server extension to test running the webpage on a local server. But still it is not working as shown in the screenshot below:

Original Q&A

There are 2 answers

**andi** · Answer 1 · 2023-04-26T11:10:57+00:00

andi On 26 April 2023 at 11:10

Try inserting the data you would like into a <div>. For example:

let my_data = "test"; 
document.getElementById("div-id").innerHTML = my_data;

**rozsazoltan** · Answer 2 · 2023-04-26T11:43:06+00:00

The error message you mentioned indicates that the browser is blocking access to a file loaded by Azure Static Web App from the local file system due to the absence of the Access-Control-Allow-Origin header. This happens because of the CORS (Cross-Origin Resource Sharing) specification, which prevents browsers from accessing resources from other origins (such as different domains or file systems) without permission from the server.

Using Azure, you can set up global headers to ensure that our requests are sent to the server in accordance with CORS rules.

Example:

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS"
  }
}

I'm not sure why your Azure web app is attempting to load content using the file:// protocol (see: file://C:/github... in error message). This is an incorrect approach for any website, as it only works on a local machine. Unfortunately, I have not had the opportunity to test this behavior on Azure. My answer is solely based on my web development experience.

TechQA.

Javascript is not able to load the list of HTML files in Static Website

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in AZURE-STATIC-WEBSITE-HOSTING

Popular Questions

Popular Tags

Trending Questions