3

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

Norbert Bartko
  • 2,468
  • 1
  • 17
  • 36
  • Could you try using VS Code on your PC together with CodeSpaces? That was how I once solved this problem. VS Code will auto-configure port forwarding and all the ports will be available on localhost as if you were coding locally. – Obum Jul 18 '22 at 13:16
  • I don't understand your comment. – Obum Jul 18 '22 at 14:36
  • 1
    When I open codespaces in vscode and change the origins array in the cors configuration it works. But that's not my goal nor question. I'm asking for a way to fix it inside the browser. – Norbert Bartko Jul 18 '22 at 15:48
  • Oh I understand, I will like to get that answer too. – Obum Jul 18 '22 at 19:18

1 Answers1

2

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',
});
Víctor Tejada
  • 31
  • 2
  • 1
    Setting the backend port visibility to public worked for me. See https://github.com/community/community/discussions/15351 – Michael Cox Feb 11 '23 at 05:52