<p>My React host has an IP of 10.60.160.61.</p>
<p>The API endpoint that I'm trying to reach has an IP of 10.200.50.21.</p>
<p>My App.js:</p>
<pre><code>useEffect(() =&gt; {
    const fecthPods = async () =&gt; {
      try {
        const response = await axios.get(`https://kubernetes.endpoint.com/k8s/clusters/name/v1/pods/myproject`,{ headers: { 'Authorization': 'Bearer token-myToken' } })
        console.log(response.data)
      } catch (err) {
        if (err.response) {
          // Not in the 200 response range
          console.log(err.response.data)
          console.log(err.response.status)
          console.log(err.response.headers)
        } else {
          console.log(`Error: ${err.message}`)
        }
      }
    } 
    fecthPods()
  },[])
</code></pre>
<p>I get two errors in the network tab of developer tools:</p>
<ol>
<li>401</li>
<li>CORS preflight</li>
</ol>
<p>I can access an external API endpoint with no issue (ie. <a href="https://pokeapi.co/api/v2/pokemon/ditto" rel="nofollow noreferrer">https://pokeapi.co/api/v2/pokemon/ditto</a>).
I can successfully run a curl command to the Kubernetes API endpoint by passing the Auth token in the headers parameter, but just not working with Axios.
I don't think I need to run a backend express server since the API endpoint that I'm trying to reach is not on my localhost.
Not sure what else to try.</p>

stminion001
<p>I believe I have found the answer to this question. Seems like I will need to run my API calls through a custom proxy as mentioned in this <a href="https://forums.rancher.com/t/request-from-react-app-to-rancher-api-returning-401/14449" rel="nofollow noreferrer">post</a>.</p>
