title: Spring React Chrome CORS error when accessed outside router
body: <p>I use Chrome as my default browser.  I have cross origins configured in my Spring backend and React front end.</p>
  <p>Spring: @CrossOrigin(origins = &quot;http://localhost:3000&quot;)
  React: const USER_API_BASE_URL = &quot;http://localhost:8080/api/v1/users&quot;;</p>
  <p>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:
  ...</p>
  <pre><code>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.&lt;computed&gt; @ 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)
  </code></pre>
  <p>...</p>
  <p>Is there a way around this?</p>