0

I am trying to get data from the News API on my front end application. I am using async-await with the fetch API, but I keep getting an error of:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https‍://newsapi.org/v2/everything?q=covid&apiKey=d69affb88e344a3da1b2a12da50f680c. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

When I try to console log each news title, that's when I get an error.

// async await newsApi fn
async function getNews() {
    const response = await fetch(news_api_url)
    if (response.status === 200) {
        console.log('Success , NEWS loaded')
        const data = await response.json()
        console.log(data);
        return data
    } else {
        throw new Error(' Unable to fetch News API data')
    }
}

getNews()
    .then(data => {
        data['articles'].forEach(article => {
            let newsTitle = document.createElement('div')
            let link = document.createElement('a')
            newsTitle.classList.add('ticker__item')
            link.appendChild(newsTitle)
            link.href = article.url
            newsTitle.textContent = article.title
            newsTickerEl.appendChild(link)
            titles.push(article.title)
            console.log(newsTitle);

            localStorage.setItem("titles", JSON.stringify(titles));
        });
    })
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tyler Morales
  • 1,440
  • 2
  • 19
  • 56
  • 1
    Only the controller of the API can resolve this. By default, you can't load data from other domains, hence the error. The exception is if the called domain outputs an `Access-Control-Allow-Origin` header allowing your request. – Mitya Feb 12 '21 at 15:55
  • 1
    This has nothing to do with `async`/`await`. See the [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) and the answers to the [linked question](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i). – T.J. Crowder Feb 12 '21 at 15:56
  • @James, that's what I thought since the News API is a fairly reputable source. I'm also fetching data from other sources using the same method and I'm having no issues. – Tyler Morales Feb 12 '21 at 16:00
  • @T.J.Crowder, it is related to async-await because I think I mihgt have to insert a method or post request within the function – Tyler Morales Feb 12 '21 at 16:15
  • 1
    @TylerMorales - No, again, the SOP and CORS have nothing to do with `async`/`await`. The issue (as detailed in the linked question's answers) is that your origin isn't passlisted by the origin you're trying to fetch from, so the browser denies access to the data from JavaScript code running in your origin. You'd have the same problem if you didn't use promises at all (e.g., `XMLHttpRequest`). – T.J. Crowder Feb 12 '21 at 16:33
  • 1
    @James - Why does that seem weird? GET via ajax is absolutely subject to the SOP. – T.J. Crowder Feb 12 '21 at 16:33
  • 1
    @T.J.Crowder yep you are of course correct I was thinking about preflights – James Feb 12 '21 at 17:03
  • @James - I've done that. :-D – T.J. Crowder Feb 12 '21 at 17:41

0 Answers0