I have a frontend single page application written using Vuejs, I use axios to call a backend API. I am trying to use kubernetes to run the service:

My deployment and service yml file:

apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: testapi
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: testapi
    spec:
      containers:
      - name: testapi
        image: testregistry.azurecr.io/testapi:latest
        ports:
        - containerPort: 3001
---
apiVersion: v1
kind: Service
metadata:
  name: testapi
spec:
  type: LoadBalancer
  ports:
  - port: 3001
  selector:
    app: testapi
---
apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: testportal
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: testportal
    spec:
      containers:
      - name: testportal
        image: testregistry.azurecr.io/testportal
        ports:
        - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name: testportal
spec:
  type: LoadBalancer
  ports:
  - port: 8080
  selector:
    app: testportal

The frontend is running at the client browser. My axios url is connect to http://testapi:3001, which obviously is not working. Any idea how to have it connected to the backed API?