Cors Issue when connecting React Application to AWS Lambda using API Gateway HTTP API

Question

I am writing an HTTP API and have run into cors issues. I have tried a bunch of different things but have ultimately starting doing the following. 
1) Having a separate lambda function for the OPTIONS route to my api (my api only has one POST method). 
2) Sending back the following headers back in both my POST method lambda and my OPTIONS lambda

```
headers: {
            "Access-Control-Allow-Origin": "https://www.linkanimage.com, http://www.linkanimage.com, http://localhost:3000",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type",
            "Content-Type": "text/plain"
}
```

Lastly I added the following config to the API Gateway cors 
[https://ibb.co/KNZQghT]()

My problem is - the OPTIONS cors response returns a 200 but the actual POST request still returns a CORS error:

```
Access to fetch at 'https://api.linkanimage.com/uploadImage' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

Answer

Are you testing this in the browser or in a different client, such as Postman? Something that usually gets me in these situations is that if you're explicitly adding the CORS headers to the response, the headers aren't added to the response if the function fails before reaching the return statement. Note that CORS is a security feature built in to browsers, so test the API with Postman, CURL or some other client to check if it is a CORS error or not.

Another tip is to ensure you have an understanding of your functions' failure modes, so that you can log errors for debugging and fail gracefully.

Answer

So, I don't know your exact architecture but;

- If you will serve the API and front-end on the same domain in production, and have this error while working local React app:
    1. You do not need to enable CORS on the API GW.
    2. Simply you can use your relative API path in the React as '/getUserProfile' instead of 'https://api.linkanimage.com/getUserProfile' and put proxy:'https://api.linkanimage.com' in the webpack config file. This will proxy everything and you will have no CORS issues.

- If you want to serve the API and front end under different domain names, then:
   1. You will be doing cross-site requests so, you have to enable CORS in API GW for every method
   2. You can enable cors with default values and if you want you can limit the  Access-Control-Allow-Origin to the necessary domains for more strict policies.

**PS.1** Regarding file upload, your content-type should be "multipart/form-data" not "text/plain"

**PS.2** Again, if you are using JSON for your regular (not upload) API calls, your content-type will be "application/json"

Cors Issue when connecting React Application to AWS Lambda using API Gateway HTTP API

Relevant content