sveltekit-adapter-lambda
sveltekit-adapter-lambda copied to clipboard
Form enhance not working when I am using adapter-lambda
See the screenshot below for example formEnhance action form submission not working.
Hi @santhoshoutright , thank you for your interest in my project,
I believe the issue may be due to the x-sveltekit-action header been missing from your allowed header list within serverless.yml, could you try adding this and retesting. If this is the issue, ill add this into the repo
@yarbsemaj Thank you for making this Adapter and yes, I tried adding x-sveltekit-action still form-enhance not working as expected.
Below is my serverless.yml file configuration:
service: "your_app_name"
frameworkVersion: "3"
plugins:
- "@silvermine/serverless-plugin-cloudfront-lambda-edge"
- serverless-s3-deploy
provider:
name: aws
runtime: nodejs18.x
lambdaHashingVersion: 20201221
region: us-east-1 #Lambda@Edge must be deployed in us-east-1
stage: ${opt:stage, 'dev'}
environment:
BASE_URL: "you_app_backend"
VITE_BASE_URL: "you_app_backend"
package:
individually: true
exclude:
- ./**
include:
- build/server/**
- build/edge/**
- build/assets/**
- build/prerendered/**
custom:
assets:
auto: true
targets:
- bucket:
Ref: StaticAssets
files:
- source: ./build/assets/
globs:
- "**"
empty: true
headers:
CacheControl: max-age=31104000
- source: ./build/prerendered/
globs:
- "**"
empty: true
headers:
CacheControl: max-age=60
functions:
#SSR Function
svelte:
handler: build/server/serverless.handler
memorySize: 256
timeout: 15
url: true
#Router Function
cfLambda:
handler: build/edge/router.handler
memorySize: 128
timeout: 1
lambdaAtEdge:
distribution: "WebsiteDistribution"
eventType: origin-request
resources:
Resources:
StaticAssets:
Type: AWS::S3::Bucket
Properties:
BucketName: ${self:provider.stage}-${self:service}-static-assets
OwnershipControls:
Rules:
- ObjectOwnership: BucketOwnerPreferred
PublicAccessBlockConfiguration:
BlockPublicAcls: false
BlockPublicPolicy: false
IgnorePublicAcls: false
RestrictPublicBuckets: false
StaticAssetsS3BucketPolicy:
Type: AWS::S3::BucketPolicy
Properties:
Bucket:
Ref: StaticAssets
PolicyDocument:
Statement:
- Sid: PublicReadGetObject
Effect: Allow
Principal: "*"
Action:
- s3:GetObject
Resource:
Fn::Join:
["", ["arn:aws:s3:::", { "Ref": "StaticAssets" }, "/*"]]
WebsiteDistribution:
Type: "AWS::CloudFront::Distribution"
Properties:
DistributionConfig:
Origins:
- DomainName:
!Select [
2,
!Split [
"/",
!GetAtt ["SvelteLambdaFunctionUrl", "FunctionUrl"],
],
]
Id: default
OriginCustomHeaders:
#Lambda@edge does not support ENV vars, so instead we have to pass in a customHeaders.
- HeaderName: "s3-host"
HeaderValue: "${self:provider.stage}-${self:service}-static-assets.s3.amazonaws.com"
CustomOriginConfig:
HTTPPort: 80
HTTPSPort: 443
OriginProtocolPolicy: "https-only"
Enabled: true
Comment: "${self:service}_${self:provider.stage}"
DefaultCacheBehavior:
TargetOriginId: default
Compress: true
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
CachedMethods:
- GET
- HEAD
- OPTIONS
ForwardedValues:
Headers:
- x-forwarded-host
- x-sveltekit-action # Add this line to include x-sveltekit-action header
Cookies:
Forward: all
QueryString: True
ViewerProtocolPolicy: "redirect-to-https"
FunctionAssociations:
- EventType: viewer-request
FunctionARN: !GetAtt XForwardFunction.FunctionMetadata.FunctionARN
XForwardFunction:
Type: AWS::CloudFront::Function
Properties:
AutoPublish: true
Name: "${self:provider.stage}-${self:service}-XForwardFunction"
FunctionCode: !Sub |
function handler(event) {
event.request.headers['x-forwarded-host'] = event.request.headers['host']
return event.request
}
FunctionConfig:
Comment: "Add x-forwarded-host"
Runtime: cloudfront-js-1.0