0

I'm almost complete with a new web app, however, I'm getting a 403 error from AWS's API Gateway due to a CORs issue.

I'm creating a Vue app and using Vue's axios library. CORs is enabled and the request works with API Key Required option turned off in AWS's API Gateway by sending the following:

    axios
      .get('My-URL-Endpoint',{headers: {})
      .then(response => (this.passports = response.data ));

When I turn on API Key Required functionality inside AWS's API Gateway. It works when I use Postman along with including x-api-key: My-API-Key. However, using Vue's axios it does not work and returns error 403:

    axios
      .get('My-URL-Endpoint', {headers: { 
        'x-api-key': 'My-API-Key'
      }})
      .then(response => (this.passports = response.data ));

My first instinct is that the problem is related to how Axios is sending the request through the browser. From what I can gather it looks like the pre-flight check is failing because I am receiving the following error within the browser:

Access to XMLHttpRequest at 'My-URL' from origin 'http://localhost:8080' 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.

Sure enough it looks like there is no access-control-allow-origin key in the response. So I added access-control-allow-origin to the response of the 403 message and got a new error "It does not have HTTP ok status"

I've been trying nearly everything to get this to work! I came across stackoverflow answer where it seems like the person was suggesting that API Key Required Key functionality can't work with CORs. This kind of seemed like that cannot be true. It would be a pretty crippling restriction.

So my question is how to get the browser's pre-flight check to work along with CORs and API Key capability inside AWS's API Gateway?

Thank you!

Dharman
  • 30,962
  • 25
  • 85
  • 135
user3732456
  • 33
  • 9

1 Answers1

2

If you have enabled cors on your api gateway, the next place to look is the application code such as lambda. Make sure the Lambda is returning the correct cross origin headers in both successful and failure scenarios.

First of all you can check if the request is reaching the lambda from the cloud watch logs. Another way to check this is to temporarily point the Api gateway target to the Mock end point.

If the mock endpoint works, then the problem is the application code. otherwise the problem is in your api gateway end point.

Also note that any headers you use should be white listed in the Access-Control-Allow-headers section when you enable to cors for your method/resource.

Arun Kamalanathan
  • 8,107
  • 4
  • 23
  • 39
  • All good recommendations! I checked the lambda function execution times and it shows that the API Gateway did not kick off the function. I then setup a mock function and it runs when I test it in API Gateway, but when I try to kick it off from my website I get another CORs error. – user3732456 Aug 24 '20 at 00:31
  • One more note: What I'm ultimately trying to do is throttle how many requests my API will accept to ensure I don't get overcharged via a malicious attack. I'd highly prefer to use API Keys for this reason, but if there is another way to do this without API Keys then I might be able to use that as a workaround? – user3732456 Aug 24 '20 at 00:34
  • ok if the lambda did not receive it, then its the api endpoint. Check you check it again, click the GET/Post resource of the method and enable cors. can you also try deploying the api again from the console itself – Arun Kamalanathan Aug 24 '20 at 00:43
  • I've totally have done those instructions 5-6 times including the deploy action. Again it works without API Key Required Off, but not when the API Key Required On. :( – user3732456 Aug 24 '20 at 01:44
  • 1
    When you enable cors , can you see if you have `x-api-key` is one of the allowed headers. You can also try with "*" for the headers – Arun Kamalanathan Aug 24 '20 at 02:19
  • It's working now! I did have X-Api-Key within the allowed headers, but I didn't have x-api-key. Do you know if it is case sensitive? Regardless applying '*' to the allowed headers seemed to work for me! Thank you! – user3732456 Aug 24 '20 at 04:40
  • One more added note: I had to make sure that the API Key generated was attached to the correct stage for my testing. (It was wrong earlier today) – user3732456 Aug 24 '20 at 04:42
  • @user3732456 I am having exact same issue. I have API gateway end point which works fine without X-Api-Key access through axios. When I enable X-Api-Key it does works in postman but not through axios request. Below is my code to access Get API export default axios.create({ baseURL: `${process.env.SIGN_IN_URL}`, withCredentials: false, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Api-Key': `${process.env.APPKEYID}`, 'Access-Control-Allow-Origin': "*" }, }); – Gayatri Apr 18 '22 at 19:49
  • @Gayatri I would suggest generating the "axios code" from postman and compare it with your current code. Postman has the code generation feature (it usually appears in the right panel with a ">" icon). One of the options there is called "NodeJs - Axios". Once the source code is displayed, you could compare that with your code to see whats missing. Let me know how you go – Arun Kamalanathan Apr 19 '22 at 00:27
  • @ArunKamalanathan Thank you for postman tip. I copied exact same code that axios gives me in postman in my react application. It still failing in preflight and returning Forbidden Exception. – Gayatri Apr 19 '22 at 15:27
  • @Gayatri Can you post the exact error. Preflight errors are often related to CORS. I think you need to enable CORS in your endpoint. it works from postman because CORS is a browser feature, postman or curl does not make preflight requests. you first need to enable CORS on the API gateway endpoint. Second, your endpoint should return the correct cross-origin headers. This quick article briefs everything I've covered here. https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html – Arun Kamalanathan Apr 20 '22 at 01:02
  • @ArunKamalanathan Yes CORS has already enabled on API gateway. It does work when I disabled API key on API gateway. But when I enable back and add headers in my axios request which include x-api-key and content-type. It return 403 Forbidden exception in preflight. Preflight returns 403 Forbidden exception. Access to XMLHttpRequest at 'api/endpoint' from localhost origin 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. – Gayatri Apr 20 '22 at 19:23
  • @Gayatri this is clearly a cors issue. When you send the request from postman, does the response headers include access-control-allow headers containing localhost. Please post the headers here. – Arun Kamalanathan Apr 21 '22 at 02:57