It's easy

How to get rid of CORS Error for API Gateway and Lambda Function at AWS (and enable queryStringParameters)

 

Go to API Gateway

Apps aws HLR EPM SDL Resource Groups APIS + Create API AGA API created on 917/2019 No description protocol: HTTP Endpoint Configuration Endpoint Type O Regional Configure Tags CNS Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings

Text in image:Apps aws HLR EPM SDL Resource Groups APIS + Create API AGA API created on 917/2019 No description protocol: HTTP Endpoint Configuration Endpoint Type O Regional Configure Tags CNS Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings

 

Apps aws HLR EPM SDL Resource Groups APIS + Create API AGA API created on 917/2019 No description protocol: HTTP Endpoint Configuration Endpoint Type O Regional Configure Tags CNS Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings

Text in image:Apps aws HLR EPM SDL Resource Groups APIS + Create API AGA API created on 917/2019 No description protocol: HTTP Endpoint Configuration Endpoint Type O Regional Configure Tags CNS Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings

 

console.aws.amazon.com/apigateway/home?region 3 HLR EPM SDL =us-e... CNS Apps aws ENG e InsertjQuery cjs e Make Page Editable YAG Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings Resource Groups APIs > Create Choose the protocol seect whether you would like to create a REST API or a websocxet API. o websocxet Create new API In Amazon API Gateway, a REST API refers to a collection of resources and methods that can be invoked through HTTPS endpoints. C) Clone from existing API @ New API Settings Choose a friendly name and description for your API. API name• Description Endpoint Vpe * Required testi23 Regional C) Example API Import from Swagger or Open API 3 o N. Virginia • Support Show all hints Create API

Text in image:console.aws.amazon.com/apigateway/home?region 3 HLR EPM SDL =us-e... CNS Apps aws ENG e InsertjQuery cjs e Make Page Editable YAG Services Amazon API Gateway I APIs AGA API temp testAPl Usage Plans API Keys Custom Domain Names Client Certificates VPC Links Settings Resource Groups APIs > Create Choose the protocol seect whether you would like to create a REST API or a websocxet API. o websocxet Create new API In Amazon API Gateway, a REST API refers to a collection of resources and methods that can be invoked through HTTPS endpoints. C) Clone from existing API @ New API Settings Choose a friendly name and description for your API. API name• Description Endpoint Vpe * Required testi23 Regional C) Example API Import from Swagger or Open API 3 o N. Virginia • Support Show all hints Create API

 

Apps RSS aws STE SDL HLR EPM Services Resource Groups CNS ENG APIs > test123 (aqskex4nhc) e Insert j I (6uxz9nn Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Resources > Resources > / Methods Actions. RESOURCE ACTIONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACT IONS Deploy API Import API Edit API Documentation API

Text in image:Apps RSS aws STE SDL HLR EPM Services Resource Groups CNS ENG APIs > test123 (aqskex4nhc) e Insert j I (6uxz9nn Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Resources > Resources > / Methods Actions. RESOURCE ACTIONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACT IONS Deploy API Import API Edit API Documentation API

 

Apps aws RSS STE SDL HLR COG EPM CNS Services Resource Groups ENG e Insert j I (6uxz9nn Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl APIs > test123 (aqskex4nhc) > Resources > Resources Actions. • / Methods

Text in image:Apps aws RSS STE SDL HLR COG EPM CNS Services Resource Groups ENG e Insert j I (6uxz9nn Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl APIs > test123 (aqskex4nhc) > Resources > Resources Actions. • / Methods

 

—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ANY ø 9 VAG my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > / (6uxz9nnzv2) - ANY - Setup > Show all hints Resources Actions / Choose the integration point for your new method. Integration ty use Lambda Proxy integratio Lambda Region Lambda Functio use Default Timeout O O O O Lambda Function O HTTP O o o AWS service VPC Link O us-east-2 testFunction •o o

Text in image:—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ANY ø 9 VAG my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > / (6uxz9nnzv2) - ANY - Setup > Show all hints Resources Actions / Choose the integration point for your new method. Integration ty use Lambda Proxy integratio Lambda Region Lambda Functio use Default Timeout O O O O Lambda Function O HTTP O o o AWS service VPC Link O us-east-2 testFunction •o o

 

 

Your Lambda Region dropdown option should correspond to the region of your Lambda function. Otherwise the function will be unavailable for the API Gateway

 

—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups cjs Make Page Editable ø ENG 9 VAG e Insert jQuery / (6uxz9nnzv2) None Not required my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > Show all hints Methods Resources RESOURCE ACV •ONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACTION s Deploy API Import API Edit API Docurnentation Delete API

Text in image:—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups cjs Make Page Editable ø ENG 9 VAG e Insert jQuery / (6uxz9nnzv2) None Not required my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > Show all hints Methods Resources RESOURCE ACV •ONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACTION s Deploy API Import API Edit API Docurnentation Delete API

 

—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ø 9 VAG y—aWS N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > / (6uxz9nnzv2) > Resources Actions. 'Enable CORS Gateway Responses for testl 23 Methods Access-Control-Allow.Methods Access-Control.Allow-Headers Access-Control.Allow.Origin* Advanced Enable CORS o DEFAULT 4XX OPTIONS O DEFAULT 5XX O DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT O o o Show all hints Enable CORS and replace existing CORS

Text in image:—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ø 9 VAG y—aWS N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > / (6uxz9nnzv2) > Resources Actions. 'Enable CORS Gateway Responses for testl 23 Methods Access-Control-Allow.Methods Access-Control.Allow-Headers Access-Control.Allow.Origin* Advanced Enable CORS o DEFAULT 4XX OPTIONS O DEFAULT 5XX O DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT O o o Show all hints Enable CORS and replace existing CORS

 

—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups cjs Make Page Editable ø ENG 9 VAG e Insert jQuery / (6uxz9nnzv2) None Not required my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > Show all hints / Methods Resources ANY OPTIONS RESOURCE ACV •ONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACTIONS Deploy API Import AP I Edit API Docurnentation Delete API e OPTIONS Mock Endpoint Authorization None API Key Not required

Text in image:—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups cjs Make Page Editable ø ENG 9 VAG e Insert jQuery / (6uxz9nnzv2) None Not required my-aws N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Settings testAPl Usage Plans API APIs > test123 (aqskex4nhc) > Resources > Show all hints / Methods Resources ANY OPTIONS RESOURCE ACV •ONS Create Method Create Resource Enable CORS Edit Resource Documentation API ACTIONS Deploy API Import AP I Edit API Docurnentation Delete API e OPTIONS Mock Endpoint Authorization None API Key Not required

 

console.aws.amazon.com/apigateway/home?region —us-e... CNS Apps aws ENG Insert jQuery cjs Make Page Editable ø 9 VAG Services SDL HLR Resource Groups APIs test123 (aqskex4nhc) my-aws o Ege N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource Policy Documentation Settings testAPl Usage Plans Deploy API Choose a stage where your API will be deployed. For example, a test version of your API Show all hints Resources OPTIONS Actions • could be deployed to a stage named beta. Deployment stage Stage name' Stage description Deployment description [New Stage] test321 Cancel

Text in image:console.aws.amazon.com/apigateway/home?region —us-e... CNS Apps aws ENG Insert jQuery cjs Make Page Editable ø 9 VAG Services SDL HLR Resource Groups APIs test123 (aqskex4nhc) my-aws o Ege N. Virginia Support Amazon API Gateway APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource Policy Documentation Settings testAPl Usage Plans Deploy API Choose a stage where your API will be deployed. For example, a test version of your API Show all hints Resources OPTIONS Actions • could be deployed to a stage named beta. Deployment stage Stage name' Stage description Deployment description [New Stage] test321 Cancel

 

Get the link

 

—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ø 9 VAG Amazon API Gateway APIs > test123 (aqskex4nhc) my-aws Invoke LJR https://aqskex4nhc.execute-apius-east-1-amazonaws.com/test321 N. Virginia • Support Show all hints APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Dashboard Settings testAPl I Plane Stages test321 Stages > test321 test321 Stage Editor Settings Logs/ Tracing Cache Settings Delete Stage Configure Tags Stage Variables SDK Generation Export Deployment History Documentation History Canary Enable API cache Default Method Throttling Choose the default throttling level for the methods in this stage. Each method in this stage will respect these rate and burst settings. Your current account level throttling rate is 10000 requests per second with a burst of 5000 requests. Read more about API Gateway throttling Enable throttling Rate Burst Web Application Firewall (WAF) 10000 5000 Leam more. requests per second requests

Text in image:—us-e... CNS Apps aws console.aws.amazon.com/apigateway/home?region STE SDL HLR Services Resource Groups ENG Insert jQuery cjs Make Page Editable ø 9 VAG Amazon API Gateway APIs > test123 (aqskex4nhc) my-aws Invoke LJR https://aqskex4nhc.execute-apius-east-1-amazonaws.com/test321 N. Virginia • Support Show all hints APIs AGA API temp testi23 Resources Stages Authorizers Gateway Responses Models Resource policy Documentation Dashboard Settings testAPl I Plane Stages test321 Stages > test321 test321 Stage Editor Settings Logs/ Tracing Cache Settings Delete Stage Configure Tags Stage Variables SDK Generation Export Deployment History Documentation History Canary Enable API cache Default Method Throttling Choose the default throttling level for the methods in this stage. Each method in this stage will respect these rate and burst settings. Your current account level throttling rate is 10000 requests per second with a burst of 5000 requests. Read more about API Gateway throttling Enable throttling Rate Burst Web Application Firewall (WAF) 10000 5000 Leam more. requests per second requests

 

And use it in your request

 

$.ajax({

  method: "GET",

  url: "https://aqskex4nhc.execute-api.us-east-1.amazonaws.com/test321?name=John&city=Seattle",

  context: document.body,

  data: { name: "John", location: "Boston" }

})

  .done(function( data ) {

    console.log(data);

  });

 

Your Lambda Function should have special headers enlisted, too

 

Machine generated alternative text: imageAndTextRetrieverjs X index.js app.Js main.Js 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 * query string parameter. To put, update, or delete an item, make a POST, * PUT, or DELETE request respectively, passing in the payload to the * DynamoDB API as a JSON body. (event, context, callback) => { exports . handler //console. log( 'Received event: ' J SON . stringify(event , (err, res) => callback(null, { const done statusCode: err ? '400 ' . '200', JSON. stringify( res) , body: err ? err .message . headers : null, 2)); switch ' Content -Type ' : ' application/json ' "Access- Control -Allow -Origin " "Access -Control -Allow -Credentials" . (event. httpMethod) { case 'DELETE': // Required for CORS support to wo k // Required for cookies, auth rization headers wi true dynamo. deleteItem(JSON . parse(event . body), done) ; break; case 'GET': dynamo. scan({ TableName: event. queryStringParameters.Tab1eName }, break; case 'POST': dynamo. putltem(JSON . parse(event . body), done) ; break; case 'PUT': dynamo. updateItem(JSON . parse(event . body), done) ; break; done) ;

Text in image:Machine generated alternative text: imageAndTextRetrieverjs X index.js app.Js main.Js 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 * query string parameter. To put, update, or delete an item, make a POST, * PUT, or DELETE request respectively, passing in the payload to the * DynamoDB API as a JSON body. (event, context, callback) => { exports . handler //console. log( 'Received event: ' J SON . stringify(event , (err, res) => callback(null, { const done statusCode: err ? '400 ' . '200', JSON. stringify( res) , body: err ? err .message . headers : null, 2)); switch ' Content -Type ' : ' application/json ' "Access- Control -Allow -Origin " "Access -Control -Allow -Credentials" . (event. httpMethod) { case 'DELETE': // Required for CORS support to wo k // Required for cookies, auth rization headers wi true dynamo. deleteItem(JSON . parse(event . body), done) ; break; case 'GET': dynamo. scan({ TableName: event. queryStringParameters.Tab1eName }, break; case 'POST': dynamo. putltem(JSON . parse(event . body), done) ; break; case 'PUT': dynamo. updateItem(JSON . parse(event . body), done) ; break; done) ;

 

headers: {

            'Content-Type': 'application/json',

            "Access-Control-Allow-Origin" : "*", // Required for CORS support to work

            "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS

        }

 

 

 

MATERIALS USED:

https://docs.aws.amazon.com/en_us/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html

https://stackoverflow.com/questions/35190615/api-gateway-cors-no-access-control-allow-origin-header

 

Aws-lambda-examples

More articles:


All Articles