getting blocked CORS policy error even after setting headers in an external API

Question

I'm trying to get the data from an API about cryptos and price tracking. But whenever I try to get the data it gets a blocked CORS policy even after setting the headers. I've tried setting the mode to no-cors aswell as cors

Here is my React code:

import React, {useEffect, useState} from 'react'
import axios from 'axios'
import './tracker.css'

function Tracker() {
  const [data, setData] = useState([])

  useEffect(() => {
    setInterval(() => {
      const fetchData = async () => {
        const result = await axios('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false' , {
            'mode': 'no-cors',
            'headers': {
                'Access-Control-Allow-Origin': '*',
            }
        })
        setData(result.data)
      }
      fetchData()
    }, 1000)
  }, [])


    return (
        <div>
          <div className="tracker__names">
            <b>Coins</b>
            <b>Symbol</b>
            <b>Price</b>
            <b>Market Cap</b>
          </div>
            {data.map((coins) => {
                return (
                  <>
                  <div className="tracker__main">
                    <div className="tracker__img">
                        <img src={coins.image} className="tracker__image"/>
                      <b>{coins.id}</b>
                    </div>
                    <div className="tracker__symbol">
                        <p>{coins.symbol}</p>
                    </div>
                    <div className="tracker__price">
                        ${coins.current_price}
                    </div>
                    <div className="tracker__market">
                        ${coins.market_cap}
                    </div>
                  </div>
                  </>
                )
            })}
        </div>
    )
}

export default Tracker