GitHub codespaces CORS issues

Question

For my application im using the BFF pattern and NX as monorepo tool.

Currently im trying to make my project to run smoothly inside GitHub's Codespaces.

I have already configured my database setup and fixed an issue with Angular's development server. Now the communication between my frontend and it's backend fails due to cors.

My frontend is running under port 4080 and my api on 3080, this is how I start my angular app:

npx nx serve console --publicHost=${CODESPACE_NAME}-4080.githubpreview.dev:443 --configuration=codespaces

And thats the cors and cookie configuration for my api:

const corsOptions = {
  origin: [
    'https://{app-name}-{codespace-name}-4080.githubpreview.dev',
  ],
  credentials: true,
};
const cookieOptions = {
  httpOnly: true,
  sameSite: 'none',
  secure: true,
  path: '/',
};

Except for the origin array this configuration matches my local setup, whitch works fine.

This is the error I get when visiting my frontend:

Access to XMLHttpRequest at 'https://{app-name}-{codespace-name}-3080.githubpreview.dev/auth/refresh-token' 
from origin 'https://{app-name}-{codespace-name}-4080.githubpreview.dev' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
Redirect is not allowed for a preflight request.

Is there a way to solve this issue?

As a side note, I don't use a custom devcontainer.json

Answer 1

TRY Set codespaces port visibility to "public"

Add request headers

var response = await http.get(url, headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Credentials': 'true',
  'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token, locale',
  'Access-Control-Allow-Methods': 'GET, POST',
});