Invoke AWS lambda from react application

Question

I've developed an AWS function with .net core, it's been deployed to AWS and I can call it from Postman and seems everything's ok, but when I try to call it from a react application with Axios library I get this error:

(index):1 Access to XMLHttpRequest at 'https://awsfunctionurl/api/Organisations' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

here is the code to call the API:

const response: Response = await axios.get(url,{
      headers:{
        "content-type": "application/json; charset=utf-8",
        "Authorization": `Bearer ${accesToken}`
      },
    })

When I remove Authorization header it starts working!

Better look in the CORS settings of your lambda/api gatway, postman simply seem to not enforce them, while the browser where react runs in, of course does — Superlokkus, Oct 22 '19 at 10:54
is it because I'm running this app on my local machine? so if I publish it somewhere should it be working? — Ramin Ahmadi, Oct 22 '19 at 11:14

score 0 · Answer 1 · answered Oct 22 '19 at 16:17

0

If you are running the request from a local browser, it will block the pre-flight request by default. There are workarounds for this, depending on the browser. See here, for example, for Chrome.

Alternatively, it may be easier to just add '"Access-Control-Allow-Origin": "*"' in your response headers from the lambda function itself.

answered Oct 22 '19 at 16:17

Frank O'Connor

121
1
1
4

PS: `"Access-Control-Allow-Origin": "*" ` Do allow all clients (origins) to request your lambda. Be careful when setting it in production, you need to specifi the origin domain like so.com or urAwesomeSite.org – Mehdi Benmoha Oct 22 '19 at 16:19

Invoke AWS lambda from react application

1 Answers1