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
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
I did but still the same thing