title: Vite-- Cannot fetch API from a particular Address
body: <p>I created A vite-react app, in my App I'm trying to fetch a public API</p>
  <p><a href="https://api.football-data.org/v4/matches" rel="nofollow noreferrer">https://api.football-data.org/v4/matches</a></p>
  <pre><code>// This does not work
  </code></pre>
  <p>But I get</p>
  <pre><code>Access to fetch at 'https://api.football-data.org/v4/matches' from origin 'http://localhost: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.
  </code></pre>
  <p>I know what the error means, but this is a public API and I'm confused about where to add CORS.</p>
  <p>But I noticed I could fetch another public API successfully using the same method.</p>
  <p><a href="http://swapi.dev/api/planets/1/" rel="nofollow noreferrer">http://swapi.dev/api/planets/1/</a></p>
  <pre><code>// This API works
  </code></pre>
  <p>page.tsx</p>
  <pre><code>const fetchAllCompetitions = async () =&gt; {
    const res = await fetch(&quot;https://api.football-data.org/v4/matches&quot;);
    return res.json();
  };
  
   const { data } = useQuery(&quot;users&quot;, fetchAllCompetitions);
  
    console.log(data);
  </code></pre>
  <p>Kinda confused.</p>
  <p>is there anything I would have to set on the <code>vite-config</code> file?</p>