I’ve been fortunate enough to receive some free AWS credits for my latest project I’m building with Redwood. I’ve already migrated everything across, but I am struggling to get CORS working correctly for the API.
I’m using Severless to deploy the API to Lambda and the Serverless Finch plugin to deploy the front end to an S3 Container that’s then served via Cloudfront.
I am using Serverless Domain Manager to host the API at https://api.fished.io/graphql, and I have set the apiProxyPath inside my redwood.toml
.
When making a request to the API from the front end, I get the classic CORS error:
Access to fetch at 'https://api.fished.io/graphql' from origin 'https://fished.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Here’s my serverless.yml
:
# See the full yml reference at https://www.serverless.com/framework/docs/providers/aws/guide/serverless.yml/
service:
name: fished
plugins:
# - serverless-dotenv-plugin
- serverless-domain-manager
- serverless-finch
custom:
dotenv:
include: []
customDomain:
apiType: http
domainName: api.fished.io
stage: production
createRoute53Record: true
endpointType: regional
basePath: ''
autoDomain: true
client:
bucketName: fished.io
distributionFolder: web/dist
indexDocument: index.html
errorDocument: index.html
provider:
name: aws
runtime: nodejs12.x
region: ap-southeast-2
httpApi:
cors:
allowedOrigins:
- https://fished.io
allowedHeaders:
- Content-Type
- Authorization
allowedMethods:
- OPTIONS
- GET
- POST
allowCredentials: false
maxAge: 6000
payload: '1.0'
package:
individually: true
functions:
graphql:
description: graphql function deployed on AWS Lambda
package:
artifact: api/dist/zipball/graphql.zip
memorySize: 1024
timeout: 25
tags:
endpoint: /graphql
environment:
CLIENT_BASE_URL: ${env:CLIENT_BASE_URL}
SEGMENT_API_KEY: ${env:SEGMENT_API_KEY}
SENDGRID_API_KEY: ${env:SENDGRID_API_KEY}
DATABASE_URL: ${env:DATABASE_URL}
STRIPE_API_KEY: ${env:STRIPE_API_KEY}
handler: graphql.handler
events:
- httpApi:
path: /graphql
method: GET
- httpApi:
path: /graphql
method: POST
My graphql.js
is:
import {
createGraphQLHandler,
makeMergedSchema,
makeServices,
} from '@redwoodjs/api'
import Analytics from 'analytics-node'
import sendgrid from '@sendgrid/mail'
import schemas from 'src/graphql/**/*.{js,ts}'
import services from 'src/services/**/*.{js,ts}'
import { getCurrentUser } from 'src/lib/auth'
import { db } from 'src/lib/db'
sendgrid.setApiKey(process.env.SENDGRID_API_KEY)
export const analytics = new Analytics(process.env.SEGMENT_API_KEY)
export const handler = createGraphQLHandler({
schema: makeMergedSchema({
schemas,
services: makeServices({ services }),
}),
cors: {
origin: 'https://fished.io',
credentials: false,
},
db,
getCurrentUser,
})
My redwood.toml
[web]
port = 8910
apiProxyPath = "https://api.fished.io"
includeEnvironmentVariables = ['SEGMENT_API_KEY', 'CLIENT_BASE_URL']
[api]
port = 8911
[browser]
open = true
Is this the correct way of hosting the API on a subdomain?