Github API returns CORS error when using create-react-app

Question

I am trying to download the latest release of a specific private repository. I am able to gather information by using this GET request:

const handleDownload = async () => {
    const token = "{Very secret token not for StackOverflow}";
    const owner = {company};
    
    const response = await fetch(
      `https://api.github.com/repos/${owner}/${repo}/releases/latest`,
      {
        //mode: 'no-cors',
        headers: {
          Authorization: 'Bearer ' + token,
        },
      }
    );

    const log = await response.json();
    console.log(log);
}

This call returns some data, including the 'zipball_url' property, where i think my download comes from. However, if i try to make a request to this URL (including my token), i am getting a nasty CORS error:

Access to fetch at 'https://codeload.github.com/{company}/{reponame}/legacy.zip/refs/tags/1.1.7?token={secret token}' (redirected from 'https://api.github.com/repos/{company}/{reponame}/zipball/1.1.7') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

The Github API Docs are not helping me very much. Can someone explain me how to fix this?

Answer 1

The zipball_url simply redirects to the codeload.github.com sub-domain and Github doesn't allow public CORS access to that.

If you're wanting the user to download the file, just use the zipball_url directly in a <a download> element

const [ zipUrl, setZipUrl ] = useState(null)

const downloadRef = useRef(null)

const getLatestRelease = async () => {
  // this is greatly simplified with no error handling for brevity  
  const res = await fetch(yourGithubUrl)
  return (await res.json()).zipball_url
}

useEffect(() => {
  getLatestRelease().then(setZipUrl)
}, [])

useEffect(() => {
  // trigger download
  if (zipUrl) {
    downloadRef.current.click()
  }
}, [ zipUrl ])

return zipUrl && (
  <a
    download
    ref={downloadRef}
    href={zipUrl}
  >
    Download
  </a>
)

Another option is to use window.open(zipball_url) but that will open a new tab.

Answer 2

I also got the same error: { "message": "Not Found", "documentation_url": "https://docs.github.com/rest/reference/repos#download-a-repository-archive" }

and it got resolved when i register in the below url, it got resolved:

To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXXXXXXX to authenticate.