0

I have only been using AWS Lambdas for a few weeks, and I am trying to learn more about them specifically how to implement a Lambda I write on a webpage.

I have a project, I am working on in my local machine which is just a website, and some JavaScript with Axios. When I deploy my code to AWS Lambda using Serverless at the end of the output , I get a url, lets call it THE_URL. When I copy and paste this page into my browser, I am brought to a web-page which has the response on it as I expect.

But on my website, I have this script being called when I press a button,

axios
.get("THE_URL")
.then(data => console.log(data))
.catch(err => console.log(err));

And this gives me the error Access to XMLHttpRequest at 'THE_URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Which I have looked up and it seems is fairly common. I have researched and looked into the possible solutions that there were online, and that lead me to passing in as headers, and flagging the request so it looked like this,

axios
    .get("THE_URL",
       {headers: {
          "Access-Control-Allow-Origin": "*"
       },
        withCredentials: true
       }
     )

But with this, I then get an error which looks like this Access to XMLHttpRequest at 'THE_URL' from origin 'null' 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. Which I have not been able to find any solutions for online. So I figured I would ask here, and see if any of you people have ran into any errors like this?

Thanks for reading!

Zachary Ferretti
  • 85
  • 11
  • _"I have researched and looked into the possible solutions that there were online, and that lead me to passing in as headers"_ can you please direct me to these resources? I'd like to have them forcibly removed from the Internet because people keep making the mistake of trying to add `Access-Control-*` headers to their **requests**. The headers responsible for allowing cross-origin access to resources are **response** headers. They must be enabled on the remote resource – Phil Aug 09 '19 at 00:13
  • `withCredentials` is another often misused configuration. It allows cookies to be added to the request, provided your client (browser) already has cookies set for the 3rd party domain. API services do not tend to use authentication cookies so it's highly unlikely to be required. – Phil Aug 09 '19 at 00:15

1 Answers1

2

The CORS header should be in your server, not the client. The server controls which client domains may access it. By adding the "*" you are allowing any site to request a resource from your server, including localhost (assuming your lambda is publicly accessible)

Update the lambda to return the Access-Control-Allow-Origin: * header.

https://serverless.com/framework/docs/providers/aws/events/apigateway/#enabling-cors

Avner
  • 4,286
  • 2
  • 35
  • 42
  • Thank you so much Avner, this helped me get it working! Hope you have a great day. – Zachary Ferretti Aug 10 '19 at 16:48
  • You're welcome, glad to help! – Avner Aug 11 '19 at 20:45
  • Avner, while this worked for the GET method, I was working on the POST method is failing. After spending quite some time looking at the developer tab in chrome, I have found that in the **GET** the content type of the request is `application/json` whereas in the post it is `application/json:charset=utf-8`. I have not been able to remove this flag on the content type, and for some reason I feel as though this is what is causing, the `Access-Control-Allow-Origin:*` header to be failing. Do you think this is the cause? – Zachary Ferretti Aug 11 '19 at 22:01
  • Sounds like you are missing the `Access-Control-Allow-Methods` header need to allow OPTIONS, GET, POST – Avner Aug 11 '19 at 23:22
  • Hey Avner, thanks for the reply. I tried this but it did not work, you can see more details about the problem at this link: https://stackoverflow.com/q/57454105/9736802 – Zachary Ferretti Aug 12 '19 at 00:14