Github pages and CORS

[norricorp]

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?

[yoannchaudet]

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.

[norricorp]

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.

[yoannchaudet]

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).

[norricorp]

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.

[norricorp]

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.

[airtower-luna]

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.

[norricorp]

@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.

[GrantHough]

bro felt every time i fix a cors bug it just remanifests at some point

[norricorp]

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.

[Sam-cudo]

Can you be more precise about how you solved this problem

[norricorp]

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)

[dotku]

Any update about it?
I still having problem on CORS on codepen: https://codepen.io/pen/?editors=0010
Let me know if there is solution.

[IntangibleMatter]

I'm running into issues with this too- I'm using a custom CNAME for my pages site (intangiblematter.net) and I'm getting info about the request being blocked. I'm trying to request from the Bluesky API. Is it possible that there's some thing in requesting that I'm missing?

For reference, this is my request

// searchParams is just a URLSearchParams object for the request.
const searchResponse = await fetch(
	`https://public.api.bsky.app/xrpc/app.bsky.feed.searchPosts?${searchParams}`,
	{
		headers: {
			Accept: "application/json",
			// as you can see I've been trying various things and they haven't been working
			origin: "https://intangiblematter.github.io",
			Referer: "https://intangiblematter.github.io",
		},
	},
);