Skip to content

Github pages and CORS #22399

Answered by norricorp
norricorp asked this question in General
Github pages and CORS #22399
Aug 16, 2021 · 10 answers

Hello,
my set up is an app on github pages (GH) that calls a local rest api server to get data.
I can access the data from outside my office network via curl. The data is behind https.

But when the page from github pages tries to access the data, the browser console shows
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xx.xx.xx.xx:3000/users/login. (Reason: CORS request did not succeed).

The server has CORS enabled (it is the loopback 4 framework that has CORS enabled by default). Is there anything I need to do in the app under GH?

So I solved this. Nothing to do with github pages or svelte.
I was using the cors origin value in the rest server as the url of the server. It needs to be the github.io url.

Replies

10 suggested answers

Hello,

Does your Pages site has its visibility set to private?

Pages allows CORS (access-control-allow-origin header is set to *) for public sites only.

This is the current (sensitive) behavior in place until we can support custom headers.

0 replies

No the site is public.
I wonder if I need to add the mode attribute to fetch except that the default is “cors” so perhaps not.

0 replies

Only thing I can think of is extra restrictions your browser would put on. Say if xx.xx.xx.xx where an IP address that is considered local (e.g. 192.168.x.x).

0 replies

The server VM is local but within the code on github, it points to my ISP allocated IP address and the port forwarding gets it to the VM.

0 replies

I have added “mode” (cors) to the fetch request along with a header of “Access-Control-Allow-Origin” (the IP address of my ISP connection).
The same result but then I realised that I had not opened my port forwarding this time. So I opened it and got a slightly different error message.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://88.111.150.77:3000/users/login. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Now this is the first time I have had a reason that mentioned Access-Control-Allow-Origin. It is also the first time that I specifically added Access-Control-Allow-Origin to the headers in the fetch request.

Which is all very confusing.

0 replies

Access-Control-Allow-Origin is a response header, setting it in the request shouldn’t have any effect. Your local server would need to set to allow the browser to provide its response to your GH Pages site (which has a different origin). See Access-Control-Allow-Origin - HTTP | MDN.

0 replies

@airtower-luna, thank you for this.
I have read that and whenever I think I understand CORS, it comes back to bite me. Perhaps I just have a very non-standard setup.
Anyway, I have changed the loopback 4 api server to return the header. But same original error now. Looking at the headers, there is no reponse header info.
Just to add, I added logging to the rest api server and the request is not being reached and that is where I added the header.

0 replies

So I solved this. Nothing to do with github pages or svelte.
I was using the cors origin value in the rest server as the url of the server. It needs to be the github.io url.

0 replies
Answer selected

Can you be more precise about how you solved this problem

0 replies

Hello @Sam-cudo,
my backend on this is loopback 4 - it is a node framework from IBM.
An app in loopback has an index.js file which allows you to set the CORS configuration .
So I added
cors: {
origin: [‘https://xxxxxx.github.io’, ‘http://localhost:5000’],
methods: ‘GET,HEAD,PUT,PATCH,DELETE’,
},

I have two entries for CORS because the frontend code is either running on a local svelte server (localhost/PC) or on github.
There is more on loopback at Customizing Server configuration | LoopBack Documentation

I hope this helps. The key thing for me was realising that the backend had to know where to expect requests to come from; in my case either github.io or my local svelte server (or apache or nginx or whatever)

0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
General
Labels
None yet
4 participants