获取 API 跨域读取阻止 (CORB) 阻止了 MIME 类型 text/html 的跨域响应

Question

Trying to fetch the data from an an api in order to display widgets on a page. Here's my fetch request:

  var protocolToUse = (location.protocol == "https:") ? "https://" : "http://";
  // url to fetch data from
  const url = `${protocolToUse}polls-api.predictinteractive.com/get/catalog`;

  fetch(url)
    // Transform data into JSON
    .then((results) => results.json())
    .then(function(data) {
      // Get the results
      let widgets = data;
      // For each widget, store their category and group name
      for (i=0; i < widgets.length; i++) {
        var category = widgets[i]["category"];
        var group = widgets[i]["group"];
        // This is the iframe link
        var src_script = `${protocolToUse}w1.predictinteractive.com/widgets/poll_widget/index.html?{"category":"${category}"}`;
        // Create a unique variable name for each widget
        var named = nameInstance();
        // The function createWidget formats the details to display the iframe and its details
        named = new createWidget(
          category,
          group,
          src_script
        );

        // This function appends each widget to an array called allWidgets
        appendToArray(named);

      }

      // Get the widget in the allWidgets array
      var firstWidget = allWidgets.shift();

      // // Append the widget to the page
      widgetContainer.appendChild(firstWidget);
    })
    .catch(function(error) {
      console.log(error);
    });

The widget iframe doesn't display, I think it might be because of this warning I'm getting in the console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://w1.predictinteractive.com/widgets/poll_widget/index.html?{%22category%22:%22election-2020%22} with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I'm on Homestead as well. Let me know if I need to provide more information, I'd appreciate any and all help.

Answer 1

I'm just playing with the api at this point, i'm not really able to recreate your issue.

Can you tell me which browser you use? On firefox atleast i do recieve an response from the api with the data needed.

let protocolToUse = (location.protocol == "https:") ? "https://" : "http://";
const url = `${protocolToUse}polls-api.predictinteractive.com/get/catalog`;


async function fetchWídget(url) {
  const widgets = await fetch(url).then(res => res.json());
  console.log(widgets)

  for (i = 0; i < widgets.length; i++) {
    let category = widgets[i]["category"];
    let group = widgets[i]["group"];
    let src_script = `${protocolToUse}w1.predictinteractive.com/widgets/poll_widget/index.html?{"category":"${category}"}`;
    let named = nameInstance();
    named = new createWidget(
      category,
      group,
      src_script
    );
    appendToArray(named);
  }

  let firstWidget = allWidgets.shift();
  widgetContainer.appendChild(firstWidget);
}
fetchWídget(url);

EDIT: I don't have the named function, but as you can see i retrieve the data.