-1

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?

HighwayRob
  • 119
  • 2
  • 11
  • Can you provide the pre-flight request? did you try adding the remote setting with `https://*.host-url.com` for http://TESTURL.ddns.net:3000? – dee Nov 23 '21 at 13:39
  • Does this answer your question? [Chrome CORS error on request to localhost dev server from remote site](https://stackoverflow.com/questions/66534759/chrome-cors-error-on-request-to-localhost-dev-server-from-remote-site) – jub0bs Nov 23 '21 at 13:50
  • What is a 'pre-flight' request? Where do I add the 'remote setting' you refer to? – HighwayRob Nov 23 '21 at 14:00

1 Answers1

-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.

HighwayRob
  • 119
  • 2
  • 11