What is the proper way to execute this API request and retrieve the latest news data using the Fetch method?

Question

What is the proper way to execute this API request and retrieve the latest news data using the Fetch method?

Note: Please note that the API Key used in this code is not a real one for privacy reasons.

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

Upon running this Javascript code, I encounter an error:

Access to fetch at 'http://newsapi.org/v2/everything?q=platformer&apiKey=3ce15c4d1fd3485cbcf17879bab498db' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The main goal here is to fetch news data from newsapi.org and display it in the console.

javascript json fetch-api

Answer 1

Answer №1

The error message from the News API gives a clue:

Requests coming from the browser are restricted on the Developer plan, unless they originate from localhost

If you are running your application using a local development server (such as this one), simply switching your browser to http://localhost:8080/ instead of http://127.0.0.1:8080/ should do the trick:

https://i.stack.imgur.com/v798a.png

Below is a code snippet (to be executed locally with a webserver):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>\
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>News</h1>

  <button id="btn-get">Get News</button>
  <div id="news-container"></div>
  <script>
    const url = `https://newsapi.org/v2/everything?q=bitcoin&apiKey=API_KEY`

    const newsContainer = document.getElementById('news-container')

    function fetchNews(url) {
      return fetch(url)
        .then(res => res.json())
    }

    document.getElementById('btn-get').addEventListener('click', () => {
      fetchNews(url)
        .then(articles => newsContainer.textContent = JSON.stringify(articles))
    })

  </script>

</body>

</html>

Answer 2

The error message from the News API gives a clue:

Requests coming from the browser are restricted on the Developer plan, unless they originate from localhost

If you are running your application using a local development server (such as this one), simply switching your browser to http://localhost:8080/ instead of http://127.0.0.1:8080/ should do the trick:

https://i.stack.imgur.com/v798a.png

Below is a code snippet (to be executed locally with a webserver):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>\
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>News</h1>

  <button id="btn-get">Get News</button>
  <div id="news-container"></div>
  <script>
    const url = `https://newsapi.org/v2/everything?q=bitcoin&apiKey=API_KEY`

    const newsContainer = document.getElementById('news-container')

    function fetchNews(url) {
      return fetch(url)
        .then(res => res.json())
    }

    document.getElementById('btn-get').addEventListener('click', () => {
      fetchNews(url)
        .then(articles => newsContainer.textContent = JSON.stringify(articles))
    })

  </script>

</body>

</html>

Answer 3

Answer №2

If you're looking to deal with Cross-Origin Resource Sharing (CORS) issues, one solution is to use a CORS Proxy.

For a more detailed explanation on CORS Proxies, check out this existing answer here. It provides a comprehensive walkthrough.

There's also a concise accepted answer specific to NewsApi.org available here.

Here's an excerpt:

You need a CORS proxy

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);
  });

And for a deeper dive into understanding CORS, this article from Mozilla might be helpful:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 4

If you're looking to deal with Cross-Origin Resource Sharing (CORS) issues, one solution is to use a CORS Proxy.

For a more detailed explanation on CORS Proxies, check out this existing answer here. It provides a comprehensive walkthrough.

There's also a concise accepted answer specific to NewsApi.org available here.

Here's an excerpt:

You need a CORS proxy

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);
  });

And for a deeper dive into understanding CORS, this article from Mozilla might be helpful:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

What is the proper way to execute this API request and retrieve the latest news data using the Fetch method?

Answer №1

Answer №2

Similar questions

Converting Basic JSON Data into an SQL SELECT Query

Is there a way to integrate a calendar feature within an Angular 2 application?

Exploring the functionality of className using materialUI

What is the process of incorporating a video into a react.js project through the use of the HTML

Is it possible to bypass the confirmation page when submitting Google Form data?

What is the process for invoking a websocket from an HTML client?

Issues with jQuery AJAX functionality

Struggling with setting values in AngularJS?

Traversing an array of objects to extract and display the key-value pairs for each object

What is the best way to add hidden columns in Telerik Grid MVC3?

encounter with file compression using gzip

The AngularJS 2 TypeScript application has been permanently relocated

Access the system by logging in with a stored Google account

The Resharper guideline "Function Parameter" doesn't allow the usage of AngularJS service names

Begin the initial function again once the second function has been completed

Switching between pages and updating the URL without needing to refresh the page, while still maintaining the content even after a refresh

What is the best way to incorporate a condition within react material-ui components?

Looking to align the labels of material UI tabs to the left instead of their default center alignment? Here's how

Dynamic Binding of ng-model to DOM Element in AngularJS

Updating the parameters when clicking on each pagination button: A guide