Question

我一直在尝试使用JavaScript连接到API，但无法完成任务。每次尝试运行文件时，它都会显示空白的HTML页面，但是在使用其他API链接时，我的代码可以正常工作。

显示的错误：

从原点“ null”到“ http://qa.parentlane.com/api/content-feed/”的XMLHttpRequest的访问已被CORS策略阻止：“ Access-Control-Allow-Origin”标头的值“ https://www.parentlane.com”不是等于提供的原点。 scripts.js：37

跨域读取阻止（CORB）阻止了MIME类型为application / json的跨域响应http://qa.parentlane.com/api/content-feed/。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

const app = document.getElementById('root');

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'http://qa.parentlane.com/api/content-feed/', true);
request.onload = function () {

  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(feed => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

     const h1 = document.createElement('h1');
      h1.textContent = feed.title;

      const p = document.createElement('p');
      feed.text = movie.text.substring(0, 50);
      p.textContent = `${feed.text}...`;

      container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
 } 
 }

request.send();

结果应弹出一个带有JSON文件中数据的类似于网格的界面。

Answer 1

恐怕是因为您要查询的目标主机不允许访问除了本身。如果我看一下它的响应头，它会说：

access-control-allow-origin : https://www.parentlane.com

这意味着尝试查询api的脚本和api必须位于同一主机上。这是一篇深入的文章：

https://developer.mozilla.org/de/docs/Web/HTTP/CORS

连接到JAVASCRIPT时API数据出现错误

1 个答案: