CORS errors from my API Gateway API

0

The error below is the error I keep getting whenever I try to communicate with the endpoint from my Next App:

Access to fetch at 'https://xxxxxx.execute-api.us-east-1.amazonaws.com/items' from origin 'http://localhost:3000' 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.

And here is what my Configuration looks like CORS Configuration

Also Here is the structure of my Lambda function

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { DynamoDBDocumentClient, ScanCommand, PutCommand, GetCommand, DeleteCommand } from "@aws-sdk/lib-dynamodb";

const dynamoDBClient = new DynamoDBClient({});
const s3Client = new S3Client({});
const client = new DynamoDBClient({});
const dynamoDBDocumentClient = DynamoDBDocumentClient.from(dynamoDBClient);

const dynamo = DynamoDBDocumentClient.from(client);

const tableName = " ";
const s3BucketName = "";

export const handler = async (event) => {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Headers": "rid,fdi-version,anti-csrf,st-auth-mode",
      "Access-Control-Allow-Origin" : "*",
      "Access-Control-Allow-Methods": "OPTIONS,POST,GET, PUT",
       "Cache-Control": "max-age=0, no-store, must-revalidate",
       "Access-Control-Allow-Credentials": "true",

    },
    body: "",
  };

  try {
    switch (event.routeKey) {
      case "POST /items":
       
        break;

      case "GET /items":
        
        break;

      case "GET /items/{id}":
       
        break;

      case "DELETE /items/{id}":
        
        break;

      default:
        throw new Error(`Unsupported route: "${event.routeKey}"`);
    }
  } catch (err) {
    response.statusCode = 400;
    response.body = err.message;
  }

  return response;
};

// Function to generate a random alphanumeric string

2 Answers
0

In your API Gateway, set the "access-control-allow-credentials" toggle to YES

AWS
answered 10 months ago
0

This post is a good CORS troubleshooting guide. https://repost.aws/knowledge-center/api-gateway-cors-errors

AWS
answered 10 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions