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?

Do you publicly provide your "very secret token" in the source code of your website? — user16540390
– user16540390, Commented Feb 24, 2022 at 23:49
Unless your repo is private, you shouldn't need any authorisation — Phil
– Phil, Commented Feb 25, 2022 at 0:21
@Phil my repo is private, as you can read in my explanation. — RowanBlub
– RowanBlub, Commented Feb 25, 2022 at 9:49
What safety measures? Every user can read your token in the dev tools. Your browser has to send it as clear text and users can read it in the network tab. — user16540390
– user16540390, Commented Feb 25, 2022 at 10:33
An API, that expects a secret token, usually doesn't allow direct access from a browser. It makes sense that you can't access a private repository without any credentials (though I would expect 403 instead of 404). I recommend using a proxy, that adds the token and CORS headers (or make the repository public). — user16540390
– user16540390, Commented Feb 25, 2022 at 15:18

Phil · Accepted Answer · 2022-02-25 00:32:56Z

2

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.

edited Feb 25, 2022 at 0:32

answered Feb 25, 2022 at 0:27

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RowanBlub Over a year ago

I tried this approach already. This redirects the browser to a page with a json response like this:

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

. I think this is because my repo is private.

Kumar · Accepted Answer · 2022-05-30 05:44:56Z

-1

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.

answered May 30, 2022 at 5:44

Kumar

11 bronze badge

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

mo3n Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related