title: Running ReactJS application with HTTPS and backend APIs behind a Kubernetes Ingress
body: <p>I am developing a ReactJS application that is calling REST APIs running in kubernetes.
  The setup is as follows:</p>
  <ul>
  <li>ReactJS being developed/debugged locally and ran with &quot;npm start&quot; because nothing beats how fast the local development server detects changes and reload the browser when changes are detected.</li>
  <li>ReactJS API requests are done with axios</li>
  <li>Backend APIs written in GO running as separate deployment/services locally in minikube.</li>
  <li>There is an Ingress installed locally in minikube to forward requests from urlshortner.local to the respective k8s service.</li>
  </ul>
  <p>The basic idea is the following:</p>
  <p>ReactJS -&gt; k8s ingress -&gt; GO REST API</p>
  <p>Now the problem starts when I try to set secure httpOnly cookies. Because the cookie needs to be secure, I created a self signed ssl certificate and applied it to be used by the ingress. I also enabled CORS settings in the ingress configuration. I also configured axios to not reject self signed certificates.</p>
  <p>For some reason that is unknown to me I can't success in making the request.</p>
  <p>Below are my relevant config files and code snippets:</p>
  <p>k8s ingress:</p>
  <pre><code>apiVersion: networking.k8s.io/v1beta1
  kind: Ingress
  metadata:
    name: url-shortner-backend-services
    namespace: default
    annotations:
      nginx.ingress.kubernetes.io/rewrite-target: /$2
      nginx.ingress.kubernetes.io/enable-cors: &quot;true&quot;
      nginx.ingress.kubernetes.io/cors-allow-origin: &quot;https://localhost:4000&quot;
      nginx.ingress.kubernetes.io/cors-allow-credentials: &quot;true&quot;
  spec:
    tls:
      - secretName: urlshortner-local-tls
        hosts:
          - urlshortner.local
    rules:
      - host: urlshortner.local
        http:
          paths:
            - path: /shortner(/|$)(.*)
              backend:
                serviceName: url-shortener-service
                servicePort: 3000
            - path: /auth(/|$)(.*)
              backend:
                serviceName: auth-service
                servicePort: 3000
  </code></pre>
  <p>The react application start scripts:</p>
  <pre><code>PORT=4000 SSL_CRT_FILE=tls.crt SSL_KEY_FILE=tls.key react-scripts start
  </code></pre>
  <p>The axios code snippet that creates an axios instance that is used to issue a POST request</p>
  <pre><code>import axios from &quot;axios&quot;;
  import https from &quot;https&quot;;
  
  export default axios.create({
      baseURL: 'https://urlshortner.local',
      withCredentials: true,
      httpsAgent: new https.Agent({
          rejectUnauthorized: false
      })
  });
  </code></pre>
  <p>When a POST request is made, I see the following error in the browser console/network tab even though when I first load the page I am accepting the certificate warning and adding it as a trusted certificate:
  <a href="https://i.stack.imgur.com/fyVmo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fyVmo.png" alt="cors error in Firefox" /></a></p>
  <p><strong>The end result that I would like to achieve is to be able to set a cookie and read the cookie on subsequent requests.</strong></p>
  <p>The cookie is being set as follows:</p>
  <pre><code>c.SetSameSite(http.SameSiteNoneMode)
  c.SetCookie(&quot;token&quot;, resp.Token, 3600, &quot;/&quot;, &quot;localhost:4000&quot;, true, true)
  </code></pre>
  <p>What is missing? What am I doing wrong?
  Thanks in advance</p>