React axios request blocked by CORS policy when deployed to server - api

Question

Ok, I hope I am not making a duplicate but my question is a bit different from most of the result for CORS questions.
I have springboot rest api backend and I have reactJs frontend using Axios.
on my API interface I added
#CrossOrigin(origins = {"http://localhost:3000", "http://localhost"})
#RequestMapping ...
...
Locally everything is running fine.
React running on http://localhost:3000
api running on http://localhost:8080/apixxx/orders
So I deployed them on my ubuntu server:
React running on http://12.123.12.123 (port is 80)
api running on http://12.123.12.123:8080 (postman requests are successful)
Now see, I put #CrossOrigin origin of "http://localhost" because that is for the deployed copy of my API, since relative to the server it is localhost.
Now I am getting:
Access to XMLHttpRequest at 'http://localhost:8080/apireq/v1/apiresourcexx' from origin 'http://12.123.12.123' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
this is the same error I get locally when I remove the #CrossOrigin.
I tried adding in the origins "http://12.123.12.123", "http://12.123.12.123:80", "http://myDomainName.com" (my domain name), "http://myDomainName.com:80".
Nothing works. Still the same error.
What I found works is:
#CrossOrigin(origins = {"*"})
But I dont want to do that....
Please help.
-----UPDATE-----
Ok, I am really confused now.
Apparently, I just realized that the axios routing I used is axios.post('http://localhost:8080/apixxx/orders', ...); And basically this will point to the springboot running on my local machine, not on the prod server. If that is the case, then each of my client will be different origin and all of them will be calling my API... If that is the case then the only solution is that one I am avoiding: #CrossOrigin(origins ="*")
Please advise. What do you guys usually do in this situaion.