Design approach for identifying domain and redirecting to api

We have developed an "api/logapi/api" which sits on abc.com domain (prod) and dev.abc.com(pre prod) which is a relative path.

It is accessed as "abc.com/logapi/api" for prod and dev.abc.com/logapi/api for pre prod

This api is called under a component wrapper(React JS) which makes call and sends logs to Prepared and prod environments

Problem: When this api is consumed in different domain then this fails because since its a relative path , the other domain gets appended and fails.

In that case this API fails. How to avoid this problem ?

My Solution: I will maintain a config where I list all the different domains and its environments like below

[
    {
        url: xyz.com,
        env: prod
    },
    {
        url: dev.gbh.com,
        env: pre - prod
    },
    {
        url: qa.xyz.com,
        env: pre - prod
    }
]

My Log component when accessed from different domain will react the Window location and compare it with the matching URL In config file Iam maintaining.

If I find a match I will get env whtether its Prod or Pre prod, then I will call my abc.com api with ABSOLUTE URL.

I am looking for a more best practice solution.