0

192.168.10.10/:1 Access to fetch at 'http://newsapi.org/v2/top-headlines?country=us&apiKey=myapikey from origin 'http://192.168.10.10:3000' 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. What should I do? Pls Help

Here is my code:

`import React,{useState} from 'react';
  import './App.css'
  import News from './News.jsx'
   const App = () => {

   const [news,setNews] = useState([])



 const getNews = async () => {

const response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=myapikey`,{
    
})
const data= await response.json();
setNews(data.articles)
console.log(news)



}


return (
    <div className='container'>
        <section className='container mb-5'>
            <h1 className='text-center xs heading'>The Latest News Web Application</h1>
            
            <button type="button" className="btn btn-outline-primary btn-lg " style={{marginLeft:'450px',marginTop:'10px'}} onClick={getNews}>Get The Latest News</button>

        </section>

        <div className='News'>
      {
          news.map(info => (
            <News
            key={info.author} 
            author={info.author}
            title={info.title}
            description={info.description}
            content={info.content}
            urlToImage={info.urlToImage}
            url={info.url}
            publishedAt={info.publishedAt}
            />
          ))
      }
        </div>
    </div>
)
 }

 export default App`
Deekshanta Paudel
  • 11
  • CORS issue occur due to server it's not linked with React please ask the server guy to Allow CORS: Access-Control-Allow-Origin – Manoj Bhardwaj Aug 26 '20 at 10:57
  • As this a public api CORS will be enabled in backend. But as you are getting CORS, I doubt your API key is not mapped for your local dev server IP. – kiranvj Aug 26 '20 at 11:02
  • @kiranvj — There is no reason to expect that an API will grant permissions through CORS just because it is public … especially when it requires that developers sign up for an API key (which would be pointless if that API key was exposed to all the developer's visitors because it is in the client-side code)! – Quentin Aug 26 '20 at 11:04
  • It will not throw an error if you use version-1 of the same API. Use - `https://newsapi.org/v1/articles?source=the-verge&apiKey=${ApiKey}` – Alok Mali Aug 26 '20 at 11:12

0 Answers0