stminion001
stminion001

Reputation: 353

React - Getting 401 authorization and CORs preflight error when trying to access a Kubernetes API endpoint using Axios

My React host has an IP of 10.60.160.61.

The API endpoint that I'm trying to reach has an IP of 10.200.50.21.

My App.js:

useEffect(() => {
    const fecthPods = async () => {
      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()
  },[])

I get two errors in the network tab of developer tools:

  1. 401
  2. CORS preflight

I can access an external API endpoint with no issue (ie. https://pokeapi.co/api/v2/pokemon/ditto). 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.

Upvotes: 0

Views: 160

Answers (1)

stminion001
stminion001

Reputation: 353

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

Upvotes: 1

Related Questions