CODEWITHSUNDEEP
javascriptreactjsapiaxiosreact-hooks
Paschal
Paschal

Reputation: 143

API request error - No 'Access-Control-Allow-Origin' header is present on the requested resource

i tried fetching an API request but it is getting back this error Access to XMLHttpRequest at 'https://api.deezer.com/chart' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

the code

const {data, setData} = useState({});
    const API = "https://api.deezer.com/chart";
    useEffect(() => {
        axios(API)
        .then(response => {
            setData(response);
            console.log(data)

        })

Upvotes: 6

Views: 51047

Answers (3)

Monzoor Tamal
Monzoor Tamal

Reputation: 810

const url = "https://api.deezer.com/chart";
const config = {
   url,
   headers: {
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    }
}


const {data, setData} = useState({});
    
    useEffect(() => {
        axios(config)
        .then(response => {
            setData(response);
            console.log(data)

        })
   }  //closing bracket required
); //closing bracket required

you need to send your headers like this. Or you can set axios global default header axios default header

and in you API side you need to activate CORS

// if it is node api
const cors = require('cors');
app.use(cors());

Upvotes: 3

Ashu Kharbanda
Ashu Kharbanda

Reputation: 94

You have to understand that the CORS behavior is not an error — it’s a mechanism that’s working as expected in order to protect your users, you, or the site you’re calling. Check Link here

You can make it work by following different ways :

Temporary solution :

  1. Disabling chrome security using

    Windows : Windows + R --> chrome --disable-web-security --user-data-dir

    MacOS : open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

  2. Adding and using chrome extension : https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-GB

Permanent Solution :

If you don't have access to the api server which i can see you don't have you can call this API from your wrapper server it can be any server for eg : Node-express server or Java server (Adding basic node server example just call /getCharts api and you will get your desired results)

const express = require('express')
const app = express()
const port = 3000
const axios = require('axios');

app.get('/getCharts', (req, res) => {
  const API = "https://api.deezer.com/chart";
  axios(API)
    .then(response => {
      console.log(response.data)
      res.json(response.data)
    }).catch(err => {
      res.send('errr!!!')
    })
})

app.listen(port, () => console.log(`Server running on http://localhost:${port}`))

Upvotes: 6

Quentin Grisel
Quentin Grisel

Reputation: 4987

You need to set the mode to 'no-cors' for this api to work :

fetch("https://api.deezer.com/chart", {
  mode: 'no-cors'
});

Upvotes: 0

Related Questions