我有哪些选项可以避免跨域请求被阻止？

问：

情况：

我想在渲染之前调用 --> Food Hygiene API 并操作结果。

我相信我可以在单页 Web 应用程序中用 Javascript 编写这个客户端，从而避免了对全栈应用程序的需求。

我遇到了“跨域请求被阻止”，随后发现了 CORS 遵循的同源策略。

我随后尝试：

包含此代码的 CORS 请求（来自此源）：

$( document ).ready(function() {
  const ul = document.getElementById('authorities');
  const url = 'http://ratings.food.gov.uk/authorities/json'

  function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
      xhr.open(method, url, true);
      return xhr;
  }

  var xhr = createCORSRequest('GET', url);

  xhr.onload = function() {
    var responseText = xhr.responseText;
    console.log(responseText);
  }

  xhr.onerror = function() {
    console.log("there was an error!");
  }

  xhr.send();  
});                                                                     

使用 JSONP 的 jQuery 调用（该调用会出错，并且不会从目标返回 responseText）：

function getData() {
    $.ajax({
      type: "GET",
      url: 'http://ratings.food.gov.uk/authorities/json',
      accept: "text/json",
      async:true,
      contentType: 'text/plain',
      dataType : 'jsonp',   
      crossDomain:true,
      xhrFields: {
        withCredentials: false
      },
      success: function(json) {
        alert("Success");
        console.log(json);
      },
      error: function(data) {
        alert("Error");
      },
    });
  }

据我所知，目标 api 不支持 CORS，因为 HTTP 响应在 vanilla 和 jQuery 示例中都推送到 。xhrerror

已在本地“解决”了此 Chrome 扩展程序的问题，但我认为它不会为克隆存储库或使用该页面（例如托管在 Heroku 上）的用户解决问题。

从这里我有什么选择？