sveltekit-adapter-lambda icon indicating copy to clipboard operation
sveltekit-adapter-lambda copied to clipboard

Form enhance not working when I am using adapter-lambda

Open santhoshoutright opened this issue 2 years ago • 2 comments

See the screenshot below for example formEnhance action form submission not working. Screenshot 2023-08-17 130321

santhoshoutright avatar Aug 17 '23 07:08 santhoshoutright

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 avatar Aug 20 '23 17:08 yarbsemaj

@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

santhoshoutright avatar Aug 24 '23 23:08 santhoshoutright