API get 请求未在 JavaScript 中解析

Question

我想知道是否是因为它试图访问两个IP？抱歉，如果这是一个菜鸟问题，但是当我使用我内置的 postman 的 API 时，或者即使我只是将 get 请求 url 扔到任何浏览器中，它也会返回 JSON 数据。有点困惑为什么它不会为我解决。

const app = document.getElementById('root')

const logo = document.createElement('img')

logo.src = 'logo.png'

const container = document.createElement('div')

container.setAttribute('class', 'container')

app.appendChild(logo)

app.appendChild(container)

var request = new XMLHttpRequest()

request.open('GET', '18.220.177.84:8080/election_results?state=Ohio&year=2016&county=Cuyahoga', true)

request.onload = function () {

  // Begin accessing JSON data here

  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {

    data.forEach((election_results) => {

      const card = document.createElement('div')

      card.setAttribute('class', 'card')

      const h1 = document.createElement('h1')

      h1.textContent = election_results.county

      const p = document.createElement('p')

      election_results.candidate = election_results.candidate.substring(0, 300)

      p.textContent = `${election_results.candidate}...`

      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()

是因为我使用的是 xml http 请求吗？

Answer 1

URL 解析器认为18.220.177.84:8080是URL路径的一部分。在它前面加上//（以及可选的方案，例如https更改协议），让解析器知道这是URL 的权限（在本例中为主机+端口）。

Answer 2

显然，您在 Postman GET 调用中混合了两个单独的 IP 地址。第一个只是本地主机 (&nbsp;127.0.0.1:5500)，第二个是您尝试访问的实际服务器 (&nbsp;18.220.177.84:8080)您的 GET 调用应该只命中 (&nbsp;18.220.177.84:8080) （删除第一部分，本地主机）

Answer 3

因此，问题出在您的代码中，您在不提及协议的情况下向 URL 发出 get 请求。在 URL 之前使用 HTTP 或 HTTPS（视需要而定）。所以网址将是，https://18.220.177.84:8080/election_results?state=Ohio&year=2016&county=Cuyahoga希望这能解决您的问题。现在来讨论有关 CORS 错误的第二个问题。基本上，CORS 或跨源资源共享是一种标准，允许服务器过滤特定的跨源请求，同时拒绝其他请求。就您而言，您的请求被服务器阻止或拒绝。所以为了解决这个问题，如果您有权访问服务器，请允许您的源接受从您的源发出的跨源请求。您可以通过设置来做到这一点，Access-Control-Allow-Origin: <Your origin>. 例如，Access-Control-Allow-Origin: http://localhost:3000. 您可以通过指定将任何来源列入白名单 Access-Control-Allow-Origin: *，但我强烈建议您不要这样做。您可以使用代理服务器来处理请求。使用像Moesif Origin & CORS Changer这样的插件，尽管它只能在您的浏览器上运行并且只能用于开发。（不建议）