I have problems setting CORS My stack ```import as sst from Serverless Stack #help

I have problems setting CORS. My stack: ```import ...

Artemiy Davydov

03/15/2022, 1:49 PM

I have problems setting CORS. My stack:

Copy code

import * as sst from "@serverless-stack/resources";
import { TableFieldType } from "@serverless-stack/resources";
import path from "path";
import { CorsHttpMethod } from "@aws-cdk/aws-apigatewayv2-alpha";

export default class CoreStack extends sst.Stack {
  constructor(scope: <http://sst.App|sst.App>, id: string, props?: sst.StackProps) {
    super(scope, id, props);

    const usersTable = new sst.Table(this, "UsersTable", {
      fields: {
        email: TableFieldType.STRING,
      },
      primaryIndex: { partitionKey: "email" },
    });

    const linksTable = new sst.Table(this, "LinksTable", {
      fields: {
        id: TableFieldType.STRING,
      },
      primaryIndex: { partitionKey: "id" },
    });

    const webStatic = new sst.ReactStaticSite(this, "WebStatic", {
      path: path.resolve(__dirname, "../../frontend"),
      cfDistribution: {
        comment: "Distribution for React website",
      },
    });

    const api = new sst.Api(this, "Api", {
      defaultAuthorizationType: sst.ApiAuthorizationType.AWS_IAM,
      cors: {
        allowHeaders: ["Authorization", "Content-Type"],
        allowMethods: [CorsHttpMethod.ANY],
        allowOrigins: ["<http://localhost:3000>", webStatic.url],
        allowCredentials: true,
      },
      defaultFunctionProps: {
        // See /esbuild.js. This is necessary to support decorators
        bundle: {
          esbuildConfig: {
            plugins: "esbuild-decorators-plugin.js",
          },
        },
        environment: {
          GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID || "",
          GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET || "",
          USERS_TABLE_NAME: usersTable.tableName,
          LINKS_TABLE_NAME: linksTable.tableName,
        },
        permissions: [usersTable, linksTable],
      },
      routes: {
        "GET /{id}": "src/functions/_id/get/handler.main",
        "DELETE /links/{id}": "src/functions/links/_id/delete/handler.main",
        "GET /links/{id}": "src/functions/links/_id/get/handler.main",
        "PUT /links/{id}": "src/functions/links/_id/put/handler.main",
        "POST /links/create": "src/functions/links/create/handler.main",
        "GET /links/list": "src/functions/links/list/handler.main",
        "GET /users/authRedirect":
          "src/functions/users/authRedirect/handler.main",
        "GET /users/me": "src/functions/users/me/handler.main",
      },
    });

    this.addDefaultFunctionEnv({
      FRONTEND_URL: webStatic.url,
      API_URL: api.url,
    });

    this.addOutputs({
      ApiEndpoint: api.url,
      WebEndpoint: webStatic.url,
    });
  }
}

But I still have this in response headers:

Copy code

access-control-allow-origin: *

Tell me, please, how do you configure CORS?

Arpad

03/15/2022, 3:11 PM

can you expand on this issue? are requests failing on localhost or?

Artemiy Davydov

03/15/2022, 3:32 PM

@Arpad It looks like the headers haven't been updated at all. Does not work on any environment

Arpad

03/15/2022, 3:33 PM

have you tried returning the cors headers directly from your handlers?

Frank

03/15/2022, 10:53 PM

Thanks @Arpad

Frank

03/15/2022, 10:56 PM

@Artemiy Davydov i tried our a similar CORS config as u shared above:

Copy code

const api = new sst.Api(this, "Api", {
      cors: {
        allowHeaders: ["Authorization", "Content-Type"],
        allowOrigins: ["<http://localhost:3000>"],
        allowCredentials: true,
      },
      ...
    });

Frank

03/15/2022, 10:57 PM

And I ran

sst build

, and checked the CloudFormation template in

.build/cdk.out

, I see an

AWS::ApiGatewayV2::Api

block that looks like this

Copy code

"ApiCD79AAA0": {
      "Type": "AWS::ApiGatewayV2::Api",
      "Properties": {
        "CorsConfiguration": {
          "AllowCredentials": true,
          "AllowHeaders": [
            "Authorization",
            "Content-Type"
          ],
          "AllowOrigins": [
            "<http://localhost:3000>"
          ]
        },
        ...
      }
    },

Frank

03/15/2022, 10:58 PM

You should see the

CorsConfiguration

set according to your

cors

setting in SST.

Frank

03/15/2022, 10:58 PM

Can you check if you see the same?

Artemiy Davydov

03/16/2022, 12:01 AM

Copy code

"ApiCD79AAA0": {
      "Type": "AWS::ApiGatewayV2::Api",
      "Properties": {
        "CorsConfiguration": {
          "AllowCredentials": true,
          "AllowHeaders": [
            "Authorization",
            "Content-Type"
          ],
          "AllowMethods": [
            "*"
          ],
          "AllowOrigins": [
            "<http://localhost:3000>",
            {
              "Fn::Join": [
                "",
                [
                  "https://",
                  {
                    "Fn::GetAtt": [
                      "WebStaticDistribution81BBDC61",
                      "DomainName"
                    ]
                  }
                ]
              ]
            }
          ]
        },

Artemiy Davydov

03/16/2022, 12:08 AM

but i got

Frank

03/16/2022, 1:24 PM

By setting

CORS

Api

, it’s automatically adding an

OPTION

route with the correct CORS response headers.

Frank

03/16/2022, 1:25 PM

If you need to set response headers in ur GET routes, you’d need to return them in your Lambda functions.

Frank

03/16/2022, 1:27 PM

Btw, if ur browser can make a GET request, it usually means CORS has been already enabled and the OPTION call has passed the CORS check. Is that what you r seeing?

Open in Slack

Previous Next