Search code examples
javascriptcorsgithub-apiclient-sidepreflight

How to force authentication in preflight request?

I'm trying to call Github REST API from client-side javascript (in browser).

My code does the following (I'm trying to get a zip containing the branch mkdocs_page of a private repository) :

    const endpoint = 'https://api.github.com';
    const resource = '/repos/astariul/private-gh-pages/zipball/mkdocs_page';
    const options = {
      mode: 'cors',
      headers: {
        'Authorization': 'Basic ' + btoa(`${pat}`),  // pat contains my Personal Access Token
      }
    }

    return fetch(`${endpoint}${resource}`, options);

But it does not work : enter image description here The preflight request fails with 404.

The console error message :

Access to fetch at 'https://api.github.com/repos/astariul/private-gh-pages/zipball/mkdocs_page' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

In the process of debugging this, I tried to reproduce the problem with curl. And when I specify an authenticated request, it works :

curl --user "<my_PAT_token>" -i https://api.github.com/repos/astariul/private-gh-pages/zipball/mkdocs_page -X OPTIONS

HTTP/1.1 204 No Content

But if the request is not authenticated, it does not work :

curl -i https://api.github.com/repos/astariul/private-gh-pages/zipball/mkdocs_page -X OPTIONS

HTTP/1.1 404 Not Found

Note : it works fine when I'm trying to get the master branch (authenticated or not). However it fails after, when being redirected :

Access to fetch at 'https://codeload.github.com/astariul/private-gh-pages/legacy.zip/refs/heads/main?token=XXX' (redirected from 'https://api.github.com/repos/astariul/private-gh-pages/zipball') from origin 'null' 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.

Is it a bug in the Github API ? Or I'm doing something wrong ?

Solution

  • There’s no way to force authentication in a preflight request. The preflight is controlled totally by the browser, and nothing about it is exposed in any way that you can manipulate from frontend JavaScript code. And the requirements for the CORS protocol explicitly prohibit browsers from including any credentials in preflight requests.

    For a detailed explanation, see the answer at https://stackoverflow.com/a/45406085/.

    Since the preflight involves the browser making an OPTIONS request, then in general, if a server requires authentication for OPTIONS request to a particular resource (which seems to be the case for the GitHub URL cited in the question) that’s not at all necessarily an unintended bug.

    That’s because the only normal case in which a preflight is performed and an OPTIONS request is sent is for the case of frontend JavaScript code running in a browser. Requests made from server-side code or from code running in shell/command-line environment or from desktop apps or native mobile apps don’t involve sending an OPTIONS request.

    So, lack of support for unauthenticated OPTIONS requests to a particular resource would only be a bug if the provider actually intended it to be used from frontend code running in a browser. In other words, it can instead indicate the provider intentionally doesn’t want it to be used from frontend JavaScript code (which seems to be the case for the URL cited in the question).