Javascript 如何正确调用此api并使用fetch从api获取新闻

注意：出于隐私考虑，api密钥是假的

const url = 'http://newsapi.org/v2/everything?' +
          'q=platformer&' +
          'apiKey=3ce15c4d1fd3485cbcf17879bab498db';

async function getNews() {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
}

getNews()

问题是，当我运行此javascript代码时，会出现以下错误：

在获取时访问'http://newsapi.org/v2/everything?q=platformer&apiKey=3ce15c4d1fd3485cbcf17879bab498dbCORS策略已阻止来自源“null”：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。

---

基本上，我想从newsapi.org中获取新闻，并在控制台中查看数据。

简而言之，您可以使用CORS代理

您的问题已经得到了回答，这提供了更大的CORS代理解释和演练

---

对于NewsApi.org也有一个公认的答案，具体来说，这个答案要简短一点

摘录：

你需要一个CORS代理

const proxyUrl = "https://cors-anywhere.herokuapp.com/"
const qInTitle = "";
const from = "";
const apiKey = "";
const url = `${proxyUrl}https://newsapi.org/v2/everything?qInTitle=${qInTitle}&from=${from}language=en&apiKey=${apiKey}`;
const request = new Request(url);

fetch(request)
  .then(response => response.json())
  .then((news) => {
    console.log(news);
  })
  .catch(error => {
    console.log(error);
  });

---

此外，如果您需要更多地了解CORS，这里有一篇非常全面的文章：

的错误消息提供了一个提示：

开发者计划中不允许来自浏览器的请求，本地主机除外

假设您确实使用本地开发服务器（如）运行应用程序，将浏览器指向

http://localhost:8080/

而不是

http://127.0.0.1:8080/

实现了以下目的：

下面的代码示例（使用Web服务器在本地运行）：

文件
新闻
得到消息
常量url=`https://newsapi.org/v2/everything?q=bitcoin&apiKey=API_KEY`
const newscanner=document.getElementById（'news-container'）
函数获取新闻（url）{
返回获取（url）
.then（res=>res.json（））
}
document.getElementById（'btn-get'）。addEventListener（'click'，（）=>{
获取新闻（url）
.then（articles=>newscanner.textContent=JSON.stringify（articles））
})

由于网站的CORS策略，您无法从其他域获取数据。一个解决方案是在Node.js中使用axios，实际上，在服务器端发出请求会更好。因为您的API密钥是私有的。它不应该与任何人共享，因此不能嵌入到前端代码中。这就是API没有启用CORS的原因。“您可以通过以下三种方式之一将API密钥附加到请求：-apiKey querystring参数。-X-API-key HTTP header。-授权HTTP header。我们强烈建议使用后两种方式之一，以便其他人在日志或请求嗅探中看不到您的API密钥。”，将他们的API密钥公开给一个应该保密的服务是不好的做法。@Bren这可能是真的（我绝对同意@blex！），但是如果OP没有要求最佳做法，提供关于使用CORS代理或其他可行解决方案的答案可能仍然有助于OP的目标。我遇到426升级错误：newsapi.js:20 GET 426（需要升级）当我在localhost上运行，但我的网站托管在university.edu上时，这确实有效