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 地址。

第一个只是本地主机 ( 127.0.0.1:5500)，第二个是您尝试访问的实际服务器 ( 18.220.177.84:8080)

您的 GET 调用应该只命中 ( 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 或跨源资源共享是一种标准，允许服务器过滤特定的跨源请求，同时拒绝其他请求。就您而言，您的请求被服务器阻止或拒绝。所以为了解决这个问题，

1. 如果您有权访问服务器，请允许您的源接受从您的源发出的跨源请求。您可以通过设置来做到这一点，Access-Control-Allow-Origin: <Your origin>. 例如，Access-Control-Allow-Origin: http://localhost:3000. 您可以通过指定将任何来源列入白名单 Access-Control-Allow-Origin: *，但我强烈建议您不要这样做。

2. 您可以使用代理服务器来处理请求。

3. 使用像Moesif Origin & CORS Changer这样的插件，尽管它只能在您的浏览器上运行并且只能用于开发。（不建议）