Backend URL variable doesn't point to the correct port

I just deployed frontend and backend pods, and there's an issue with connectivity between them.

The backend pod is configured in the following way:

apiVersion: v1
kind: Pod
metadata:
  name: af-backend-pod
  labels:
    name: af-backend-pod
    app: adv-format
spec:
  containers:
  - name: af-backend
    image: localhost:5000/backend:1.2
    ports:
    - containerPort: 4040
    env:
    - name: NODE_ENV
      value: "test"

Backend pod's service:

apiVersion: v1
kind: Service
metadata:
  name: af-backend
  labels:
    name: af-backend-service
    app: adv-format
spec:
  ports:
  - port: 4040
    targetPort: 6011
  selector:
    name: af-backend-pod
    app: adv-format

The issue appears when the frontend tries to call the backend using its name defined in the pod configuration:

apiVersion: v1
kind: Pod
metadata:
  name: af-frontend-pod
  labels:
    name: af-frontend-pod
    app: adv-format
spec:
  containers:
  - name: af-frontend
    image: localhost:5000/frontend:1.1
    ports:
    - containerPort: 80
    env:
    - name: REACT_APP_SETUP
      value: "test"
    - name: REACT_APP_BACKEND_URL
      value: "af-backend"             # <- this
    - name: REACT_APP_BACKEND_PORT
      value: "6011"

Currently, the frontend is exposed by a NodePort service at port 30120. Logging errors to console shows that the frontend tries to call the backend using URL like http://10.11.12.13:30120/ which is incorrect: I'd expect to see the backend API at port 6011, internally.

Is my understanding correct? Or should I expose the backend service to be accessible externally as well?

Or maybe there's a way to format the backend's URL, cutting out the port and replacing it with the desired one?

The problem is in Backend pod's sevice.spec.ports configuration. Target port is the port where the service will forward the traffic. In this case it is 4040, because the backend pod is listening on 4040. And the service port should be 6011 because the FE pod will be calling the service on this port. There is no need to expose the backend service as NodePort. You can also try netcat command from the FE container to check if the service the accessible. Command: nc -v Service_IP 6011 (expect "Succeeded" in response.)

apiVersion: v1
kind: Service
metadata:
  name: af-backend
  labels:
    name: af-backend-service
    app: adv-format
spec:
  ports:
  - port: 4040        << Wrong Should be 6011; FE Pod calls the service at 6011
    targetPort: 6011  << Wrong Should be 4040; backend pod container port 4040
  selector:
    name: af-backend-pod
    app: adv-format