php - 2 simultaneous API calls from Vue.js App (Axios) randomly failing but working in Postman

Question

I am currently building my frontend with Vue.js and my API is built with Slim. All of my pages in which only one API is required perform without any error.

The current page I am working on requires 2 API calls to localhost/api/events and localhost/api/events/68/results. My Vue frontend sits at localhost:8080.

Performing the API requests on their own on other pages works fine. Performing the API requests on their own in Postman works fine. Performing many iterations of both API calls in Postman Runner work fine.

All of them call the same actions in my Vuex store (getEvents / getResults)

BUT performing both API calls from my frontend via Axios one or both randomly fail with a Slim Application Error.

500 Internal Server Error
Object { type: "Illuminate\Database\QueryException", code: 0, message: "Database hosts array is empty. (SQL: select * from `events` where `events`.`id` = 68 limit 1)", … }
...
message "Database hosts array is empty. (SQL: select * from `events` where `events`.`id` = 68 limit 1)"

question from:https://stackoverflow.com/questions/65910697/2-simultaneous-api-calls-from-vue-js-app-axios-randomly-failing-but-working-in

Answer 1

It looks like you are using .env files for database credentials. The problem is that this is not thread safe and should not be used in production. This is a known issue. Better use a env.php file to solve this issue.