https://pulumi.com logo
Join Slack
Powered by
I'm trying to enable CORS on an api gateway endpoi...
# general
s
I'm trying to enable CORS on an api gateway endpoint using awsx, but am unable to find an example in the docs of how to do so.
Copy code
new awsx.apigateway.API(`firebaseAuth-${stack}`, {
	routes: [
		{
			path: '/',
			method: 'POST',
			apiKeyRequired: true,
			eventHandler: new aws.lambda.CallbackFunction(`firebaseAuth-${stack}`, {
				callback: (event, _, cb) =>
					cb(null, {
						statusCode: 200,
						headers: {
							'Access-Control-Allow-Origin': '*',
						},
						body: handler(event),
					}),
			}),
		},
	],
})
Is there a simple way to add cors headers to the preflight response in the awsx implementation?
I'm sure an AWS_PROXY integration would work with a more granular RestAPI approach, but just wondering if there's something a little less verbose that can accomplish the same thing
s
m
I believe the current recommendation for this is to implement OPTIONS methods and set headers — let me see if I can find an example to refer to.
👀 1
Here’s one way to do it:
Copy code
const api = new awsx.apigateway.API("some-api", {
    routes: [{
        path: "/some-path",
        method: "OPTIONS",
        eventHandler: async () => {
            return {
                statusCode: 200,
                body: "",
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Headers": "*",
                },
            };
        },
    },{
        path: "/some-path",
        method: "GET",
        eventHandler: async () => {
            return {
                statusCode: 200,
                body: JSON.stringify({ someKey: "someVal" }),
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Headers": "*",
                },
            };
        },
    }],
    ...
});
.. so an OPTIONS handler for each path-method you want to CORS-enable.
s
@miniature-musician-31262 @stocky-island-3676 thanks for the responses. I have the options endpoint responding to my rest client (insomnia) with the stated headers now, but the browser still has CORS errors when I try to make a request. I double checked with https://www.test-cors.org and it fails too 🤔 . I was looking at gatewayResponses as well, but that appears to be for authorizers?
m
Interesting ok. Do you have any code you can share?
s
@miniature-musician-31262 i can share some pulumi code for sure. lemme see what i can snag from my front end js which is making the call too
pretty basic, just a lambda which gets a token from the main auth service and generates a custom token through firebase: https://gist.github.com/austin43/3fdaabf779e6c20aceac9d6105530523 I've been using 
post
. interestingly, when i switch to 
get
it 403's
s
@miniature-musician-31262 You’re right about the 
OPTIONS
method. Missed that. @sparse-tomato-56640 
OPTIONS
also needs 
Access-Control-Allow-Methods
, according to https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html That seems a good source to get it running, especially on AWS-API-Gateway.
s
@stocky-island-3676 I happened across that article and have been returning those headers. Still not working 😕
s
Can you update your gist to what you’ve currently applied, please?
What headers do you get if you 
curl -X OPTIONS endpoint
your endpoint?
s
@stocky-island-3676 curl returns 200 with the ACAO headers, as does insomnia. Makes sense because they don't have the same CORS restrictions as browsers i guess. I will update gist
s
Which headers exactly?
s
Copy code
< HTTP/2 200 
< content-type: application/json
< content-length: 0
< date: Fri, 18 Oct 2019 17:09:34 GMT
< x-amzn-requestid: 2b9b7f68-25c4-4844-9add-65d425d61f67
< access-control-allow-origin: *
< access-control-allow-headers: Origin, Content-Type, X-Auth-Token
< x-amz-apigw-id: BxK4WFZHoAMF-wA=
< access-control-allow-methods: GET, POST, PATCH, PUT, DELETE, OPTIONS
< x-amzn-trace-id: Root=1-5da9f1ce-61cb1b84c0ef3958ce5325a0;Sampled=0
< x-cache: Miss from cloudfront
< via: 1.1 <http://94c9aa0ee34e7bae8cb5974b849101a4.cloudfront.net|94c9aa0ee34e7bae8cb5974b849101a4.cloudfront.net> (CloudFront)
< x-amz-cf-pop: LAX3-C2
< x-amz-cf-id: q9MCThj8zyfJ20otw5dvb98A81h4Qcg4BUfC2VlhK7wdS5-rXqpsag==
s
AWS suggests to allow these headers. Did you try it with them?:
‘Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token’
s
@stocky-island-3676 just changed to those, no dice
axios still returns
Copy code
Access to XMLHttpRequest at 'URL_HERE' 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.
the request headers
Copy code
Accept: application/json, text/plain, */*
Authorization: Bearer BEARER_TOKEN_HERE
Referer: <http://localhost:3000/>
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Mobile Safari/537.36
x-api-key: API_KEY_HERE
s
Hmm, don’t know. I need to go now. Sorry
Have a nice weekend.
s
no problem, thanks for all your help 🙂
For anyone still following this thread... The problem was the options request axios is making not including the api key in the header. I removed the api key requirement from the options endpoint for now, and will re-add once i can figure out how to get axios to inject those headers into the preflight request.
but it works now 🙂
12 Views
Open in Slack
PreviousNext
Powered by