AWS API Gateway - CORS "access-control-allow-origin" - multiple entries

12,603

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 the Access-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)
Share:
12,603
Wes
Author by

Wes

Updated on June 13, 2022

Comments

  • Wes
    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 of http://example.com, then I am able to access the Lambda instance from http://example.com. However, if I use https://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
    Wes over 7 years
    Thanks 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
    Bob Kinney over 7 years
    @Wes that depends on the level of risk you are willing to accept. If it's just a matter of http vs https, you can probably solve this by redirecting clients to https always. With Firefox and Chrome moving toward deprecating http, this makes sense and shouldn't be too difficult.
  • Rajan Sharma
    Rajan Sharma almost 4 years
    Where should this be placed and then what should be there in the default core configuration provided by was?
  • Rajan Sharma
    Rajan Sharma almost 4 years
    I 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ć
    Mirko Vukušić over 3 years
    so 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ć
    Mirko Vukušić over 3 years
    I 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-O‌​rigin = #end This way default is overridden.
  • Willie Z
    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
    Chris Phillips about 3 years
    Thanks for this one! Worked perfectly!
  • MattS
    MattS almost 3 years
    This 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
    user6318446 over 2 years
    Can someone help to explain what's the usage of the first line: $input.json("$")? Thanks!
  • Robert Christ
    Robert Christ over 2 years
    This is by far the best answer here, ty
  • codeaprendiz
    codeaprendiz almost 2 years
    How 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 ???