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

Question

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)

        }) 

Answer 1

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

Answer 2

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)

        }) 

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

Answer 3

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

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

Answer 4

The resource you are requesting is denying to provide a response because it doesn't allow CORS(Cross Origin Resource Sharing), it means that the requested server requires additional headers to provide response to any other origin's request.

Please provide some additional credentials like (API key) in your request headers to fetch data from that API.