CODEWITHSUNDEEP
jsonpcorsgithub-pages
Daniel X Moore
Daniel X Moore

Reputation: 15070

Is there a way to enable CORS on Github pages?

I'm hosting some JSON files on Github pages, but I am unable to use $.getJSON to retrieve them unless they come from the exact same domain.

Is there a way to enable CORS for Github pages?

Upvotes: 18

Views: 15330

Answers (4)

joe
joe

Reputation: 5612

Something to note (may be obvious to others, but tripped me up):

  • URLs like https://github.com/josephrocca/anime-gan-v2-web/blob/main/anime-gan-v2.onnx?raw=true do not have Access-Control-Allow-Origin: * (i.e. can't access from another site). This is the URL that you'll get if you right click on "view raw" and copy the URL.
  • But that URL actually redirects to https://raw.githubusercontent.com/josephrocca/anime-gan-v2-web/main/anime-gan-v2.onnx, which does have the Access-Control-Allow-Origin: * header (as of 2022, at least).

So you can make requests to files on Github from client-side code on other domains if put the URL in the raw.githubusercontent.com format.

This doesn't directly answer the question, but may be useful for people who are just trying to serve content from their Github repo to users who are on a different domain.

Upvotes: 4

Daniel X Moore
Daniel X Moore

Reputation: 15070

Github Pages now has CORS enabled.

The CORS header:

Access-Control-Allow-Origin: *

Is added by default on all responses from Github pages!

Upvotes: 16

Endless
Endless

Reputation: 37855

It's possible with the API, but it has a limit...

"For requests using Basic Authentication or OAuth, you can make up to 5,000 requests per hour. For unauthenticated requests, the rate limit allows you to make up to 60 requests per hour. Unauthenticated requests are associated with your IP address, and not the user making requests."

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/repos/jimmywarting/diezyweb/contents/index.html?ref=gh-pages');
xhr.setRequestHeader("Accept", "application/vnd.github.3.raw");
xhr.send();

xhr.onload = function(e){
   alert(xhr.response)
}

Upvotes: 1

Daniel X Moore
Daniel X Moore

Reputation: 15070

As a workaround one can use JSONP, but it's still slightly a pain because the files are static, and each one will need a unique callback method.

Another alternative would be to store the files in Gists and use the Github API which works with CORS.

A third possibility is to not store the files on Github pages and instead host them on an S3/Cloudfront distribution with CORS enabled.

Upvotes: 13

Related Questions