<p>I have a network <a href="https://hub.docker.com/r/openspeedtest/latest" rel="nofollow noreferrer">speed tester</a> service and deployment in my cluster. I would like to display the widget on a window in my frontend react app within my k8s cluster ... I used iframe as follows.</p>
<pre><code>const SpeedTest = (props) =&gt; {
  return (
    &lt;div&gt;
      &lt;Container&gt;
      &lt;iframe className=&quot;speedTestFrame&quot; src={`..path..`}&gt;&lt;/iframe&gt;
      &lt;br /&gt;
      &lt;/Container&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p>My svc looks like this:</p>
<pre><code>  apiVersion: v1
  kind: Service
  metadata:
    name: speedtest
  spec:
    ports:
      - name: &quot;10000&quot;
        port: 10000
        targetPort: 8080
    selector:
      app: speedtest
</code></pre>
<p>and part of my ingress looks like this:</p>
<pre><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: speed-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
 rules:
 - http:
    paths:
    - path: /speedtest
      pathType: Exact
      backend:
        serviceName: speedtest
        servicePort: 10000
</code></pre>
<p>Now, when I use it (speed tester) as my default root <code>/</code> with only one ingress in the project, it works fine. However, my root <code>/</code> is for the frontend react app. If I set it on its own ingress like above, it says network error and does not work.</p>
<p>Is there any other way I can display this widget ?</p>
<p>How do I solve the ingress routing issue because apart from this widget and the frontend react app, I also have an admin react client app and it does not load if I place it in its own ingress as well.</p>
<p>TL;DR How do I load two react apps and a static container whose path is the root?</p>

<p><strong>How do I load two react apps and a static container whose path is the root?</strong></p>
<p>Assuming <code>root</code> path is must have Kubernetes Ingress will allow you to do that under condition that you are listing these for different host. Below you might find an exmple how this might look like for your use case:</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: ingress-example
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: frontend.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: front-end
          servicePort: 80
  - host: admin.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: admin-react
          servicePort: 80
  - host: speedtest.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: speedtest
          servicePort: 4200
</code></pre>
<p>Things get more complicated when you use different hosts because of <a href="https://www.w3.org/Security/wiki/Same_Origin_Policy" rel="nofollow noreferrer">same-origin policy</a>. It`s  a security policy enforced on client-side web applications (like web browsers) to prevent interactions between resources from different origins. While useful for preventing malicious behavior, this security measure also prevents legitimate interactions between known origins.</p>
<p>For allow that to happen you will need to enable <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" rel="nofollow noreferrer">cros origin resource sharing</a>.</p>
<p>What is CORS?</p>
<blockquote>
<p>CORS is a method to permit cross-origin HTTP requests in JavaScript,
i.e. requests made by JS running on one domain to a page on a different domain. This is usually disallowed for security reasons (it could allow one page to send requests using the user's credentials to another page); CORS provides a way to safely permit such requests.</p>
</blockquote>
<p>This can be handled in two ways, either by configuring you application to send CORS header or configure ingress to do so.  For more info please go to:</p>
<ul>
<li><a href="https://torchbox.github.io/k8s-ts-ingress/cors/#:%7E:text=CORS%20is%20a%20method%20to,page%20on%20a%20different%20domain.&amp;text=There%20are%20two%20ways%20to,to%20do%20so%20for%20you." rel="nofollow noreferrer">Configuring Cross-Origing Resource
Sharing</a></li>
<li><a href="https://www.moxio.com/blog/12/how-to-make-a-cross-domain-request-in-javascript-using-cors" rel="nofollow noreferrer">How to make a cross domain request in JavaScript using
CORS</a></li>
</ul>
