This commit fixes CORS errors when running the app in Docker by introducing the `APP_URL` environment variable. A CORS policy is set up for the backend to only allow origin from the `APP_URL`. Key changes include: - New `APP_URL` and `ORIGIN` environment variables have been added to properly configure CORS and the SvelteKit adapter, making the application's public URL easily configurable. - Dockerfiles are updated to copy the entrypoint script, Drizzle config, and migration files into the final image. - Documentation and example files (`.env.example`, `docker-compose.yml`) have been updated to reflect these changes.
2.8 KiB
Troubleshooting CORS Errors
Cross-Origin Resource Sharing (CORS) is a security feature that controls how web applications in one domain can request and interact with resources in another. If not configured correctly, you may encounter errors when performing actions like uploading files.
This guide will help you diagnose and resolve common CORS-related issues.
Symptoms
You may be experiencing a CORS issue if you see one of the following errors in your browser's developer console or in the application's logs:
TypeError: fetch failedCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource.Unexpected token 'C', "Cross-site"... is not valid JSON- A JSON error response similar to the following:
{ "message": "CORS Error: This origin is not allowed.", "requiredOrigin": "http://localhost:3000", "receivedOrigin": "https://localhost:3000" }
Root Cause
These errors typically occur when the URL you are using to access the application in your browser does not exactly match the APP_URL configured in your .env file.
This can happen for several reasons:
- You are accessing the application via a different port.
- You are using a reverse proxy that changes the protocol (e.g., from
httptohttps). - The SvelteKit server, in a production build, is incorrectly guessing its public-facing URL.
Solution
The solution is to ensure that the application's frontend and backend are correctly configured with the public-facing URL of your instance. This is done by setting two environment variables: APP_URL and ORIGIN.
-
Open your
.envfile in a text editor. -
Set
APP_URL: Define theAPP_URLvariable with the exact URL you use to access the application in your browser.APP_URL=http://your-domain-or-ip:3000 -
Set
ORIGIN: The SvelteKit server requires a specificORIGINvariable to correctly identify itself. This should always be set to the value of yourAPP_URL.ORIGIN=$APP_URLBy using
$APP_URL, you ensure that both variables are always in sync.
Example Configuration
If you are running the application locally on port 3000, your configuration should look like this:
APP_URL=http://localhost:3000
ORIGIN=$APP_URL
If your application is behind a reverse proxy and is accessible at https://archive.mycompany.com, your configuration should be:
APP_URL=https://archive.mycompany.com
ORIGIN=$APP_URL
After making these changes to your .env file, you must restart the application for them to take effect:
docker compose up -d --force-recreate
This will ensure that the backend's CORS policy and the frontend server's origin are correctly aligned, resolving the errors.