AWS Amplify API in VueJS - How is apiName formed?

Question

I have the following piece of code from AWS sample repository:

      let apiName = 'mieElasticsearch';
      let path = '/_search';
      let apiParams = {
        headers: {'Content-Type': 'application/json'},
        queryStringParameters: {'q': query, 'default_operator': 'AND', 'size': 10000}
      };
      let response = await this.$Amplify.API.get(apiName, path, apiParams);

When deployed, the call to the API via $Amplify is made to the expected domain name:

https://search-xxx-es-xxxxxxxxxxxxxx.eu-west-2.es.amazonaws.com/_search

However, when ran locally the application calls:

https://localhost/analysis/search-xxx-es-xxxxxxxxxxxxxx.eu-west-2.es.amazonaws.com/_search

I have tried entering the this.$Amplify.API.get using a debugger to see how the URL is formed, but couldn't - the debugger just enters app.js that is shown as blank (unable to fetch sources for the library?).

What could be going wrong here?

Answer 1

It appears that the endpoint parameter passed within API configuration object should contain https:// prefix. Otherwise the current URL is prepended to the apiName