A Bug in Typo Clothing

CORS, SST, API Gateway and the importance of reading your error messages.

I am extremely fortunate. My job as Manager of Developer Relations affords me the opportunity to play with a bunch of new frameworks. At the moment, I'm exploring Svelte and SST, building out data-driven user behaviour test demo.

(Oh, BTW, SST is a really neat tool for making Serverless development faster. Check it out here.)

A lot of this is new to me, but one thing wasn't; an error. Specifically, a CORS error, bane of my existence:

I Hate CORS so, so much

Screen Shot 2022-07-27 at 12.54.51 pm.png

The weird part is, the root, er, route, works fine. Hmm. Let's take a look at my route definition:

Well OK. Maybe there's some sort of SST config that only allows cross origin requests for the top level route? CORS support is on by default, but maybe if I add it explicitly, as shown in the SST Docs:

Reload

Screen Shot 2022-07-27 at 12.54.51 pm.png

Nope, still no luck. Perhaps I need to add headers to individual responses? That will suck, but at least I'll have something that works!

Reload

Screen Shot 2022-07-27 at 12.54.51 pm.png

This is becoming irritating.

To the Logs!

Weirdly, the Lambda logs don't show anything relevant, and neither do SST's invocation logs. So maybe it's API gateway being weird?

Screen Shot 2022-07-27 at 1.13.36 pm.png

Dear reader, it was not API Gateway being weird. At least, not if the root level CORS settings apply to all routes, and I don't see why they shouldn't. Shouldn't they? More log spelunking! Additional documentation reading! FIRE UP THE STACKOVERFLOW THRESHER!

Desperate Measures

I re-deployed the stack. Nothing. I restarted the Dev-side server. Nothing. I do both of those things and curse a little. Nothing.

SST lets me make local changes without re-deploying, which implies there's something clever going on with server proxying. Maybe there's a bug with local servers not managing CORS headers correctly? That doesn't sound right, given that API Gateway will over-ride any CORS responses from your backend (should it be configured to handle CORS) but perhaps this is a special case?

I dig into the docs about how SST works. Very neat!
In local mode, the lambda invocations are proxied via websocket connection to your local machine. Sadly, this rules out my final hypothesis; There should still be records of my invocations, even if they had CORS sadness. I set a breakpoint in VS Code in a desultory fashion; Something SST allows you to do. (Putting Breakpointing Lambda functions, that is, not being desultory.) It doesn't work. I'm out of ideas.

Reader, it was All My Fault

No evidence of missed config. No function logs. No evidence that requests are even reaching API Gateway.

Wait. Ponder that a moment.

|no evidence that requests are even reaching API Gateway

Oh.

Screen Shot 2022-07-27 at 2.03.23 pm.png

Oh Dear.

Screen Shot 2022-07-27 at 1.32.26 pm.png

API Gateway was responding to my request for a non-existent route with {"message":"Not Found"}. This response, apparently, didn't include CORS headers, leading to the console error message.

A Fix

I fixed the error by removing the typo, and by adding a default route to catch all future mistaken requests:

I can ensure that I will at least make the real error message more obvious.

So what did I learn?

This was almost a complete waste of time but if I dwell on that the existential dread will set in SO! Let's focus on discoveries:

  1. I learned SST has some very neat setup to make Serverless development faster, locally
  2. I learned that API Gateway can handle CORS completely, or delegate it to your backend
  3. I learned a bit about SST configuration

I was also reminded of my general practise of adding default cases to help with debugging. Given how much time was spent... learning... I regret not doing so here.

Still. Onto the next typo!