Loading JSON from external file using Fetch API?

Question

I am trying to understand how to change from using a variable inside my JS file to using external JSON. I mainly want to make it work from an external server. I've looked through countless articles that explain a part of the problem but never explain the whole thing. To be clear I want to parse a JSON file without changing it to anything or putting it into the header of my html:

If I am currently getting my data from a variable like so:

        var allQuestions = [
            { 
                question: "Who is Prime Minister of the United Kingdom?", 
                choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
                correctAnswer: 0 
            },
            {
                question: "What is your favourite colour?",
                choices: ["Green", "Brown", "Blue", "Red"],
                correctAnswer: 0
            },
            {
                question: "Who is your name?",
                choices: ["Bob", "Paul", "Andrey", "Alex"],
                correctAnswer: 0
            },
        ];


    //.................................................//

    let updateText = function(){

        // check the question is defined & exists
        if (allQuestions[questionNumber]) {
            //change the question innerHTML
            question.innerHTML = allQuestions[questionNumber].question
.......
etc...
.......

How do i change the code to get the variable from a validated json file called questions.json instead? Such as these two:

https://agwebdesign.net/files/JS1simplequizapp/questions.json https://raw.githubusercontent.com/AGrush/jsquizapp/master/questions.json

I have tried: 1.

If the JSON is in the same file and I don't run it on a local server:

import * from './questions.json'
const question = allQuestions.question;

console.log(question);

I get the error * is undefined.. why?

I have tried: 2.

(also if i use https://agwebdesign.net/files/JS1simplequizapp/questions.json i get the same error)

    var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        console.log("Json parsed data is: " + JSON.stringify(myObj));
    }
};
xmlhttp.open("GET", "./questions.json", true);
xmlhttp.send();

I get the error:

Access to XMLHttpRequest at 'file:///C:/Users/Mr%20Bojangles/Desktop/jsquizapp/questions.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I have tried 3:

I've tried using the fetch API and I get a similar error about CORS:

fetch('https://agwebdesign.net/files/JS1simplequizapp/questions.json').then(response => {
    return response.json();
}).then(data => {
    // Work with JSON data here

    console.log(data);
}).catch(err => {
    // Do something for an error here
});

Access to fetch at 'https://agwebdesign.net/files/JS1simplequizapp/questions.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can someone please just show me a working example of loading that JSON file and console logging allQuestions.question for example??