mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-11-25 07:01:01 +01:00
Merge pull request #384 from wasp-lang/filip-tighthen-up-cors
Tighten up S3 CORS configuration
This commit is contained in:
BIN
opensaas-sh/blog/src/assets/file-uploads/cors-example.png
Normal file
BIN
opensaas-sh/blog/src/assets/file-uploads/cors-example.png
Normal file
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 |
@@ -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.
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user