3

I've been trying to get a response from an AWS API for a couple of days now. It works just fine if I query it using Postman, but when I write the code using vue and axios, it simply does not work. So, here is where I am, what works and what does not.

I have a simple "getCryptos" method that gets current market values from coinmarketcap.com API. This is to prove that with some other API than an AWS one, things work. The method looks like:

async getCryptos() {
  await axios.get('https://api.coinmarketcap.com/v1/ticker/').then((resp) => {
    this.response = resp.data;
  }).catch((err) => {
    this.error = err.message;
  });
}

This method works just fine. When it's called, the code goes to the then function and fills the this.response with the collected data.

Now, for calling on the AWS API, I modified the code to add the API key and a parameter for the GET query. The code below hides the exact URL, the API key and the parameter, but you'll get the idea. I also added calls to debugger both in the then and in the catch functions to see where the code goes.

async getAWS() {
  await axios.get('https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/api', {
    headers: { 'x-api-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
    params: {
      Param: 'Value',
    },
  })
    .then((resp) => {
      this.response = resp.data;
      debugger;
    }).catch((err) => {
      this.error = err.message;
      debugger;
    });
},

The result is that the code goes through the catch function, with an error of Network error, whatever that means.

Same exact query in Postman, using the same header for the API key and the same parameter, works just fine.

So, my question is, what am I doing wrong? Why I can call on the coinmarketcap API but not on the AWS API I have? I know it's not the AWS API, and I know axios can make CORS calls since it works with coinmarketcap. What am I missing?

Tibi
  • 439
  • 7
  • 15

2 Answers2

1

You need to allow CORS requests in AWS for API Gateway services.

Go to your AWS console, go to the API gateway console, select your resource. There is an actions drop down box with an option to Enable CORS.

More info here.

Olivier De Meulder
  • 2,493
  • 3
  • 25
  • 30
  • Olivier, thank you for the advice. I did that, and it did not make any difference. Which is weird. Reading the documentation, it seems that enabling CORS in the API Gateway is what would allow me to call the API from a remote computer. But I was able to call the API using Postman **before** enabling CORS. – Tibi Oct 17 '18 at 00:30
  • Just to be clear, after I enabled CORS, I still get the **Network error** error message. – Tibi Oct 17 '18 at 00:32
1

I was dealing with this same exact error using vue js, axios and aws apigateway. I was able to get it working by removing the headers in the axios call, enabling cors, and redeploying the api. Hopefully it works for you.

Advaith
  • 11
  • 1