https://serverless-stack.com/ logo
Join Slack
Powered by
Hi all, when creating a note on <http://localhost:...
# help
k
Hi all, when creating a note on http://localhost:3000/notes/new its giving me a cors error. Im not sure where to look to fix this.
d
API gateway lambdas often report CORS errors when they are actually just exploding. What happens is that the frontend calls API Gateway for the 
HEAD
preflight call, and the response is a 500.
(check for an error in your backend lambda)
k
i figured it out a little
its now working but i dont understand why the broken code didnt work
},       cors: true,       routes: {         "POST   /notes": "src/create.main",         "GET    /notes/{id}": "src/get.main",         "GET    /notes": "src/list.main",         "PUT    /notes/{id}": "src/update.main",         "DELETE /notes/{id}": "src/delete.main",         "POST   /billing": "src/billing.main",       },
is the good code
cors: {         allowMethods: [HttpMethod.GET, HttpMethod.POST, HttpMethod.PUT, HttpMethod.DELETE, HttpMethod.OPTIONS],       },
is the bad
(i added options to check it)
is my import correct? import { HttpMethod } from "@aws-cdk/aws-apigatewayv2-alpha";
d
thats an actual CORS error, which is also possible
you should add 
<http://localhost:3000>
to the 
allowOrigins
k
inside the cors block?
d
correct
k
one sec let me try that
d
you may also need 
allowHeaders: ["*"],
these have defaults when you do 
cors: true
r
I'm not 100% on this but I think, if you specify some of the cors options, you need to specify them all, so allowMethods, allowOrigins and allowHeaders
k
Thanks guys, I just have 2 atm and its building so i can confirm in a second! 🙂
confirming just 2 dont work, adding 3rd bit
whats the security risks with allowHeaders: ["*"], ?
d
minimal, most of CORS value is in domains, and I say this as a security nut
k
aah nice
is leaving allowedOrigins: "http://localhost:3000", a security risk too?
d
lol, was just typing
k
say if i had it allow that and my custom domain
or do i need to do something liek the IsLocal thingy
cors: {         allowedOrigins: "http://localhost:3000",         allowHeaders: ["*"],         allowMethods: [HttpMethod.GET, HttpMethod.POST, HttpMethod.PUT, HttpMethod.DELETE, HttpMethod.OPTIONS],       },
still errored for me
gonna add the [ ]
lol
d
correct
k
so whats the security risks of allowedOrigins: "http://localhost:3000", on a production based system?
d
localhost
in cors is not a huge security risk, because a user's system would need something running locally to hit that address, so the user would need to be the nefarious person, in which case CORS has no value anyway (its for users out of the internet getting spoofed)
you shouldnt take my word for all of this though, lots of CORS debate on the internet to peruse.
k
too late
Derek said... 😄
d
fair
k
so safest thing would be to only allow the origins in prod. could be a risk adding localhost but its alot lower than allowing origins * - which is essentially turning off CORS protection?
d
correct
k
i must have something wrong in my allowMethods
cors: {         allowedOrigins: ["*"],         allowHeaders: ["*"],         allowMethods: [HttpMethod.GET, HttpMethod.POST, HttpMethod.PUT, HttpMethod.DELETE, HttpMethod.OPTIONS],       }, isnt working
my import is import { HttpMethod } from "@aws-cdk/aws-apigatewayv2-alpha";
d
CorsHttpMethod
you must not be in TypeScript, eh?
k
nope .js
d
this also exists, FYI: 
allowMethods: [apig.CorsHttpMethod.ANY],
k
that's good to know thanks. I'm just trying to learn to set up cors with least privilege's to understand it fully
d
sure. what you are protecting against is the ability for someone to put up a site that looks exactly like yours on another domain.
k
that could be a real possible problem for us, as its a crypto based site im building
import { CorsHttpMethod } from "@aws-cdk/aws-apigatewayv2-alpha";
cors: {         allowedOrigins: ["*"],         allowHeaders: ["*"],         allowMethods: [CorsHttpMethod.ANY],       },
still failing agh
d
im reasonably sure thats the same as 
cors: true
k
Access to XMLHttpRequest at 'https://1265.amazonaws.com/notes' 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.
shortned the url
could it be the import then?
d
i copied your import into a TypeScript file, seems fine
does 
cors:true
work?
(still)
oh, I see it
k
let me retry cors:true
d
allowedOrigins
=> 
allowOrigins
k
oooh
d
was probably me, not you
k
Im just glad of the help and the invaluable security information 🙂
redeploying now to chekc
in allow origins
can i have "*.example.com"
and would it work with things like api.example.com
d
it does not. you can lookup wildcards in CORS, which do exist, but they have to be on the end.
k
good to know thanks
great news its now working with cors
cors: {         allowOrigins: ["http://localhost:3000"],         allowHeaders: ["*"],         allowMethods: [CorsHttpMethod.POST, CorsHttpMethod.GET, CorsHttpMethod.PUT, CorsHttpMethod.DELETE],       },       routes: {         "POST   /notes": "src/create.main",         "GET    /notes/{id}": "src/get.main",         "GET    /notes": "src/list.main",         "PUT    /notes/{id}": "src/update.main",         "DELETE /notes/{id}": "src/delete.main",         "POST   /billing": "src/billing.main",       },
was the configuration that worked for me
Open in Slack
PreviousNext
Powered by