1

EDIT: Postman/Browsers received valid response bodies from Amazon API Gateway endpoint. Other web applications do not. Basic GET with no headers. No authentication required on API endpoint. JSON data.

OP:I'm leveraging Axios for CRUD in a new VueJS application. Axios needs to be able to query an API (Amazon API Gateway). Currently I have a very basic Vue component that queries data and on response prints it to the console.

axios.get('https://myamazonurl.com/api/resource')
.then(response => console.log(response))
.catch(error => console.log(error))

The Amazon API uses no Authentication and is public-facing. I can input the above URL into either a browser or Postman and I receive the appropriate response. However, Axios returns a response with no body (the header is correct, including correct response length value), but no content. If I replace the URL with any other API, the response body is fine. Also, using jquery/AJAX or fetch also produces a body with no response, but pointing either at a different API produces data.

Christopher Cain
  • 21
  • 4
  • are you getting undefined on the `console.log(response)` or something in the catch? – Prince Hernandez Dec 11 '18 at 23:03
  • I have to ask about your example-url, because when I use the api-gateway it looks something like this: `ttps://i123abc123.execute-api.[region].amazonaws.com/[ApiStage]/some-route/some-parameter` – ippi Dec 11 '18 at 23:05
  • @PrinceHernandez - the catch sends an ambiguous Error: Network Error If I use developer tools and browse Network, I see the request/response. That's where I confirm that the response headers are correct but the body is empty. – Christopher Cain Dec 11 '18 at 23:08
  • @ippi - yes, I added a placeholder URL, my actual URL matches your format – Christopher Cain Dec 11 '18 at 23:09
  • @ippi - Request Method: GET Status Code: 200 – Christopher Cain Dec 11 '18 at 23:31
  • So how are you generating the response. This might seem out of the blue, but do you get the same response with a trailing slash? like `axios.get('https://myamazonurl.com/api/resource/')` (because I've seen my fair share of lambda-functions listening for a '/*' route – ippi Dec 11 '18 at 23:34
  • I have two resources on the API Gateway that return the same results in two separate ways. Resource A integrates with a Lambda Expression and Resource B integrates with a different HTTP endpoint. The route for both resources show up with no response body. I tried appending the trailing slash, but it did not make a difference. – Christopher Cain Dec 11 '18 at 23:47
  • @ippi - I will update the original post, but I no longer think the issue has anything to do with vue.js or axios at all. I've created a new basic webpage with html/js/jquery. Within it I send 2 get requests, one to my endpoint and another to a random public endpoint. My endpoint returns the same empty response body. I'm just wracking my brain on how Postman and my broswer get valid bodies, but my basic web application won't. – Christopher Cain Dec 12 '18 at 00:05
  • Are you adding any custom headers at all before the request? (like `axios.defaults.headers.common['something'] = "something something")` – ippi Dec 12 '18 at 00:12
  • If you want a very streamlined setup for aws api and vue, I'd have a look at aws-amplify. (it also uses axios under the hood). Sorry, I know it's a bit unrelated. – ippi Dec 12 '18 at 00:14
  • I am not adding any custom headers. I was originally, for POST, but once I could not get that working, I decided to simplify and go to GET. It's also why I removed authentication requirements, so I didn't have to mess with headers. I will look into Amplify, thank you. – Christopher Cain Dec 12 '18 at 00:20
  • @ippi - Seems to be CORS related. I will troubleshoot and then post a resolution here in case someone else encounters the issue. Thank you for all of your help. – Christopher Cain Dec 12 '18 at 00:37

1 Answers1

1

Turns out I was using a broswer extension that ignored CORS and surpressed CORS warnings/errors. I modified the CORS policy for my API Gateway and the issue went away.

Christopher Cain
  • 21
  • 4