Keep getting a AJAX Error in a line where there is no such file

Question

Okay so I have 2 Questions. Hopefully both of them can be answered.

I'm using plain jQuery to call up a JSON file in one of my directories. I keep getting an AJAX error by some CORS Policy.

jquery.min.js:2 Access to XMLHttpRequest at 'file:///home/ai-sirachcha/Documents/assets/imagesList.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.

But my problem is this doesn't exist in my jQuery Code up until line 36 where I use the $.getJSON() function. But I still don't get why this error comes out

    $(document).ready(() => {
     // Datepicker Functionality jQueryUI
      $(function() {
        var dateFormat = "dd-mm-yy",
          from = $("#from")
            .datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 2
            })
            .on("change", function() {
              to.datepicker("option", "minDate", getDate(this));
            }),
          to = $("#to")
            .datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 2
            })
            .on("change", function() {
              from.datepicker("option", "maxDate", getDate(this));
            });

        function getDate(element) {
          var date;
          try {
            date = $.datepicker.parseDate(dateFormat, element.value);
          } catch (error) {
            date = null;
          }

          return date;
        }
      });

      $.getJSON("../assets/imagesList.json", function(data) {
        var carouselRow = $(".carousel-row");
        for (var i in data.images) {
          carouselRow
            .insertAdjacentHTML("beforeend", "<a></a>")
            .addClass($(".carousel-tile"))
            .css({
              "background-image": "url(" + data.images.url + ")",
              "background-size": "cover",
              "background-repeat": "no-repeat"
            });
        }
      });
    });

And my second question is whether or not you think this would work when inserting an image into a anchor tag. The JSON I have used in my getJSON() function is referring to a JSON that looks like this. I'm trying to fill out an anchor tag with the image in this location. A lot of solutions I see are using AJAX calls but for the case of this work I have I dont have to use it.

{
    "images":[{
        "title":"Something",
        "url": "../assets/something/abc.jpg"
    }]
}

If this part isn't clear enough, please let me know so I can elaborate on it more.

_"I am not trying to use Ajax here"_... `$.getJSON()` is an AJAX function — Phil, Dec 19 '19 at 23:28
@Phil how would I fix this though? As far as I've read, I need to set up a webserver? And Im trying not to do that rn — AiSirachcha21, Dec 19 '19 at 23:35

E. Charette · Accepted Answer · 2020-01-05T02:40:53.067

This error states that the AJAX request you did ($.getJSON) has been blocked by the browser. You cannot load a file from the user's hard drive directly from your code using that protocol.
I'd suggest that you use a simple local file/webserver to deliver your page and the json file, all will be handled with normal HTTP calls and since all the files are from the same origin (the local file server) the CORS permissions will not block you.

The only way to load a file directly from the client's HDD is to use the file browser input.

Keep getting a AJAX Error in a line where there is no such file

1 Answers1