AWS API Gateway - CORS "access-control-allow-origin" - multiple entries
Solution 1
Unfortunately this is not possible today. The CORS spec does not allow for partial wild cards and currently API Gateway only allows a single static value for the header.
You may be able to overload your OPTIONS method to return this value dynamically based on the incoming host header.
Solution 2
This has always been an annoyance with CORS if you want to enable several Origins.
The common workaround in other systems (e.g. express/nginx etc) is to:
- inspect the
Origin
header sent by the browser - check it against a whitelist of origins
- if it matches, return the incoming
Origin
as theAccess-Control-Allow-Origin
header, else return a placeholder (default origin)
This isn't possible using AWS-Gateway's autowired CORS support as uses a mock integration, it is however possible if you write your own code to process the OPTIONS
request.
Below is example code written with lambda proxy integrations:
const allowedOrigins = [
"http://example.com",
"http://example.com:8080",
"https://example.com",
"https?://[a-z]*.?myapp.com",
"http://localhost:[0-9]*"
];
exports.handler = (event, context) => {
const origin = event.headers.Origin || event.headers.origin;
var goodOrigin = false;
if (origin) {
allowedOrigins.forEach( allowedOrigin => {
if (!goodOrigin && origin.match(allowedOrigin)) {
goodOrigin = true;
}
});
}
context.succeed({
headers: {
"Access-Control-Allow-Headers": "Accept,Accept-Language,Content-Language,Content-Type,Authorization,x-correlation-id",
"Access-Control-Expose-Headers": "x-my-header-out",
"Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
"Access-Control-Allow-Origin": goodOrigin ? origin : allowedOrigins[0]
},
statusCode: 204
});
};
Save this as a lambda function. To set this up in API-Gateway add an OPTIONS
method and for the Integration Request
choose Lambda Function
with Use Lambda Proxy integration
ticked.
Of course the downside to this is that you are paying for the lambda functions, and calling the lambda function will probably be an extra 50ms latency over the mock integration.
Solution 3
Why not use Velocity Template language mapping template to check from a list of allowed domains and set the origin header
$input.json("$")
#set($domains = ["https://www.example.com", "https://www.abcd.com"])
#set($origin = $input.params("origin"))
#if($domains.contains($origin))
#set($context.responseOverride.header.Access-Control-Allow-Origin="$origin")
#end
Solution 4
I did something like this:
const handler: APIGatewayProxyHandler = async (event) => {
const origin = event?.headers?.Origin || event?.headers?.origin;
const allowedOrigins = ['https://example.com'];
const headers = {
'Access-Control-Allow-Origin': allowedOrigins.includes(origin)
? origin
: allowedOrigins[0],
};
return {
headers,
body: JSON.stringify({
myResponse: 'data',
}),
statusCode: 200,
};
};
Can then test via chrome dev tools by going to your client domain and running a fetch in the console:
fetch('https://exampleLambda.com/v1/example', {
method: 'get',
mode: 'cors'
headers: new Headers({
'Authorization': 'Bearer 12345,
}),
})
.then(result => result.json())
.then(console.log)
Wes
Updated on June 13, 2022Comments
-
Wes almost 2 years
I have a AWS Lambda instance that connects to a defined AWS API Gateway. If I enable CORS and give the
access-control-allow-origin
a definition ofhttp://example.com
, then I am able to access the Lambda instance fromhttp://example.com
. However, if I usehttps://example.com
, it doesn't work.So in AWS, how can I define using multiple
access-control-allow-origin
values without using a wildcard? I tried using something like*.example.com
, but that doesn't work.EDIT: If I use
'*'
as my value on the API gateway, but setup CORS rules on my S3 bucket, would that be secure? Example for bucket rules:<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>https://example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>https://www.example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
-
Wes over 7 yearsThanks Bob. I know it is not recommended to use
*
for the value (which works since anything goes), but for a low-profile site do you believe it would cause any issue? -
Bob Kinney over 7 years
-
Rajan Sharma almost 4 yearsWhere should this be placed and then what should be there in the default core configuration provided by was?
-
Rajan Sharma almost 4 yearsI am using cookied based authentication, so how can we configure these core headers for a GET request without using lambda proxy integration ?
-
Mirko Vukušić over 3 yearsso old thread but still of use, maybe even more with latest HTST issues where it's not so easy anymore to just use your local hosts file to "simulate" live or test domain. Also, this answer deserves much more votes than Lambda ones. Lambda on this is wastefull, you have to pay fro every OPTIONS request completely unnecessary. I just ran into a problem wanting my API test stage to be accessible from local dev server but also throgh Netlify's test server. Used something similar, put it on Response Mapping Templates in every OPTIONS method, similar to every other method that uses CORS.
-
Mirko Vukušić over 3 yearsI used something similar for dev: I used this apporach:
#if( $input.params('origin') == 'https://localhost:8080' && $context.stage == 'test') #set($context.responseOverride.header.Access-Control-Allow-Origin = #end
This way default is overridden. -
Willie Z over 3 years@RajanSharma in the AWS Api Gateway console, the options and post methods' Response Integration -> Content-Type: application/json -> Mapping Template
-
Chris Phillips about 3 yearsThanks for this one! Worked perfectly!
-
MattS almost 3 yearsThis solution is the simplest, thanks. One thing I was wondering - where can I find a good reference of the Velocity Template Language? I never would have known array.contains() was an available function from this reference, which is really scant: velocity.apache.org/engine/devel/vtl-reference.html
-
user6318446 over 2 yearsCan someone help to explain what's the usage of the first line: $input.json("$")? Thanks!
-
Robert Christ over 2 yearsThis is by far the best answer here, ty
-
codeaprendiz almost 2 yearsHow will the lambda proxy integration work for different API endpoints ? do we need to create separate OPTIONS method for all ? Why not just handle this at the backend API in that case ???