Spring React Chrome CORS error when accessed outside router - reactjs

Question

I use Chrome as my default browser. I have cross origins configured in my Spring backend and React front end.
Spring: #CrossOrigin(origins = "http://localhost:3000")
React: const USER_API_BASE_URL = "http://localhost:8080/api/v1/users";
All works great when I am working on my PC. I configured NOIP and configured my router to route incoming to my development PC. When I start a session using the external address I get the CORS error:
...
Access to XMLHttpRequest at 'http://localhost:8080/api/v1/users' from origin 'http://TESTURL.ddns.net:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
xhr.js:187 GET http://localhost:8080/api/v1/users net::ERR_FAILED
dispatchXhrRequest # xhr.js:187
xhrAdapter # xhr.js:13
dispatchRequest # dispatchRequest.js:53
request # Axios.js:108
Axios.<computed> # Axios.js:129
wrap # bind.js:9
getUsers # UserService.js:8
componentDidMount # LoginComponent.jsx:19
commitLifeCycles # react-dom.development.js:19816
commitLayoutEffects # react-dom.development.js:22805
callCallback # react-dom.development.js:188
invokeGuardedCallbackDev # react-dom.development.js:237
invokeGuardedCallback # react-dom.development.js:292
commitRootImpl # react-dom.development.js:22543
unstable_runWithPriority # scheduler.development.js:653
runWithPriority$1 # react-dom.development.js:11039
commitRoot # react-dom.development.js:22383
finishSyncRender # react-dom.development.js:21809
performSyncWorkOnRoot # react-dom.development.js:21795
scheduleUpdateOnFiber # react-dom.development.js:21190
updateContainer # react-dom.development.js:24375
(anonymous) # react-dom.development.js:24760
unbatchedUpdates # react-dom.development.js:21905
legacyRenderSubtreeIntoContainer # react-dom.development.js:24759
render # react-dom.development.js:24842
(anonymous) # index.js:8
./src/index.js # index.js:19
__webpack_require__ # bootstrap:856
fn # bootstrap:150
1 # reportWebVitals.js:14
__webpack_require__ # bootstrap:856
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.chunk.js:1
Show 4 more frames
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:99)
...
Is there a way around this?

Answer 1

The solution was
In the React front end changing
const USER_API_BASE_URL = "http://localhost:8080/api/v1/documenttype";
to
const USER_API_BASE_URL = "http://XXsystem.ddns.net:8080/api/v1/documenttype";
In the Spring backend changing
#CrossOrigin("http://localhost:3000")
to
#CrossOrigin(origins = "http://XXsystem.ddns.net:3000")
Interesting that the 'localhost testing still work !
Best of both worlds.