Codespaces Doesn't Allow Requests Across Ports From a Preview

At time of writing, a CORS error will occur if the web application served in a GitHub preview URL attempts to make a fetch request to a different port. Specifically, it the preflight OPTION request receive a 302 HTTP status code and fail with Redirect is not allowed for a preflight request.

Forwarding ports in a Codespace will generate a different URL for each port. For example, opening port 8000 will have a preview URL of {codespace name}-{port}.githubpreview.dev. That means, if you have your frontend and backend servers on different ports, it won’t work.

The workaround is to change the port from private (the default) to public. Annoyingly, there is no way to configure that a port be made public in the devcontainer.json so it needs to be set each time a codespace is created. The other way around is to add a reverse proxy to put both frontend and backend server on the same port, but that may not match what is in your production setup.

See also:

• GitHub Codespaces is too cumbersome and expensive to replace local development

Links to this note

• Running Docker Compose in Codespaces

  Using the built-in docker-compose configuration in GitHub Codespaces is limited. It’s better to run docker-compose inside the Codespace but this requires a docker-in-docker setup which is finicky.

• Cookies Set on a Public Suffix Domain Are Considered Cross-Origin

  Setting a cookie doesn’t always have the same behavior. If you set a cookie on a domain listed in the public suffix list using SameSite=strict, it will get blocked by CORS even if they request and the cookie are coming from the same domain.