Merge pull request #384 from wasp-lang/filip-tighthen-up-cors

Tighten up S3 CORS configuration
This commit is contained in:
Filip Sodić
2025-02-28 10:29:14 +01:00
committed by GitHub
4 changed files with 42 additions and 28 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 728 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

@@ -30,10 +30,13 @@ These are the steps necessary for you to deploy your app. We recommend you follo
Each of these steps is covered in more detail below. Each of these steps is covered in more detail below.
### Prerequisites ### Prerequisites
#### AWS S3 CORS configuration
Make sure you've got all your API keys and environment variables set up before you deploy. If you're storing files in AWS S3, ensure you've listed your production domain
in the bucket's CORS configuration under `AllowedOrigins`. Check the [File
uploading guide](/guides/file-uploading/#change-the-cors-settings) for details.
#### Env Vars #### Env Vars
Make sure you've got all your API keys and environment variables set up before you deploy.
##### Payment Processor Vars ##### Payment Processor Vars
In the [Payments Processor integration guide](/guides/payments-integration/), you set up your API keys using test keys and test product ids. You'll need to get the live/production versions of those keys. To get these, repeat the instructions in the [Integration Guide](/guides/payments-integration/) without being in test mode. Add the new keys to your deployed environment secrets. In the [Payments Processor integration guide](/guides/payments-integration/), you set up your API keys using test keys and test product ids. You'll need to get the live/production versions of those keys. To get these, repeat the instructions in the [Integration Guide](/guides/payments-integration/) without being in test mode. Add the new keys to your deployed environment secrets.

View File

@@ -11,6 +11,7 @@ import defaultSettings from '@assets/file-uploads/default-settings.png';
import newBucket from '@assets/file-uploads/new-bucket.png'; import newBucket from '@assets/file-uploads/new-bucket.png';
import permissions from '@assets/file-uploads/permissions.png'; import permissions from '@assets/file-uploads/permissions.png';
import cors from '@assets/file-uploads/cors.png'; import cors from '@assets/file-uploads/cors.png';
import corsExample from '@assets/file-uploads/cors-example.png';
import username from '@assets/file-uploads/username.png'; import username from '@assets/file-uploads/username.png';
import keys from '@assets/file-uploads/keys.png'; import keys from '@assets/file-uploads/keys.png';
@@ -78,8 +79,15 @@ Now we need to change some permissions on the bucket to allow for file uploads f
<Image src={permissions} alt="permissions" loading="lazy" /> <Image src={permissions} alt="permissions" loading="lazy" />
3. Scroll down to the `Cross-origin resource sharing (CORS)` section and click `Edit` 3. Scroll down to the `Cross-origin resource sharing (CORS)` section and click `Edit`
<Image src={cors} alt="cors" loading="lazy" /> <Image src={cors} alt="cors" loading="lazy" />
5. Paste the following CORS configuration and click `Save changes`: 5. Insert the correct CORS configuration and click `Save changes`. You can
```json copy-paste most of the config below, but **you must edit the
`AllowedOrigins` field** to fit your app. Include `http://localhost:3000` for
local development, and `https://<your domain>` for production.
If you don't yet have a domain name, just list `http://localhost:3000` for
now. We'll remind you to add your domain before deploying to production in
the [Deployment docs](/guides/deploying/#aws-s3-cors-configuration).
```json {11,12}
[ [
{ {
"AllowedHeaders": [ "AllowedHeaders": [
@@ -90,12 +98,15 @@ Now we need to change some permissions on the bucket to allow for file uploads f
"GET" "GET"
], ],
"AllowedOrigins": [ "AllowedOrigins": [
"*" "http://localhost:3000",
"https://<your-domain>"
], ],
"ExposeHeaders": [] "ExposeHeaders": []
} }
] ]
``` ```
As an example, here are the CORS permissions for this site - https://opensaas.sh:
<Image src={corsExample} alt="cors-example" loading="lazy" />
### Get your AWS S3 credentials ### Get your AWS S3 credentials