WebUI and API connectivity

[ghost]

First of all, thanks for the great opportunity to work and practice with a real and useful application.

I tried to run this application on a k8s cluster that was deployed with vagrant (https://github.com/scriptcamp/vagrant-kubeadm-kubernetes).

I created containers from the provided Docker files in that repository and placed them in my dockerhub repository.
I then modified the docker-compose file as shown in the example below:

---

version: '3'
services:

kanban-postgres:
image: `postgres:9.6-alpine'
container_name: kanban-postgres
volumes:
- kanban-data:/var/lib/postgresql/data
ports:
- 5432:5432
environment:
- POSTGRES_DB=kanban
- POSTGRES_USER=kanban
- POSTGRES_PASSWORD=kanban

kanban-app:
image: "martold/itmo:app_v1.1"
container_name: kanban-app
environment:
- DB_SERVER=kanban-postgres
- POSTGRES_DB=kanban
- POSTGRES_USER=kanban
- POSTGRES_PASSWORD=kanban
ports:
- 8080:8080
references:
- kanban-postgres

kanban-ui:
image: "martold/itmo:webui_v1.1"
container_name: kanban-ui
ports:
- 4200:80
references:
- kanban-app

volumes:
kanban-data:

---

I used the kompose application to create the yamls for the cluster.
Finally, the cluster was started with nodeport functions and port forwarding in VirtualBox.

Webui and swagger can be accessed on my local host:
http://localhost:8080/
http://localhost:8082/api/swagger-ui.html#

Problem:
Whenever I try to make a POST or PUT request, I get a 403 response if I use webui.
If I repeat the request from swagger, everything is fine and I can see the changes in webui.

Can you please explain to me why this is happening and how I can solve this problem?

Any help would be appreciated!

[waleedhere]

I'm facing the same issue. Were you able to find the solution??

[TormentedTraveler]

I encountered the same issue while deploying the application in Kubernetes and managed to resolve it. The problem originated from two main areas: CORS settings in the Java application and network configuration in the deployment setup.

CORS Configuration in Java Controllers

The Java application restricts CORS to requests only from http://localhost:4200. This is specified in the controllers KanbanController.java and TaskController.java in path kanban-app/src/main/java/com/wkrzywiec/medium/kanban/controller/ with the following annotations:

@CrossOrigin(origins = "http://localhost:4200")

To allow requests from any origin, I updated this setting to:

@CrossOrigin(origins = "*")

Networking Configuration in the Nginx Proxy:

In the kanban-ui service, the default configuration routes traffic to backend paths which aren't reachable in a Kubernetes environment. The relevant settings in kanban-ui/default.conf are:

location /api/kanbans {
    proxy_pass http://kanban-app:8080/api/kanbans;
}
location /api/tasks {
    proxy_pass http://kanban-app:8080/api/tasks;
}

Here, http://kanban-app:8080 points to a service name defined in Docker Compose, which does not work in Kubernetes unless specifically configured.

There are multiple ways to make it work in Kubernetes, they depend on how do you expose you backend, it might be NodePort, LoadBalancer (LB), or Ingress. Here's how it can be done:
-For a LoadBalancer or Ingress, simply replace http://kanban-app:8080 with the external URL provided by your Kubernetes deployment.
-For NodePort, you need to specify the external IP and port. I automated this with a script to add the IP of machine to /etc/hosts, making the service reachable inside the cluster:

Script to Modify /etc/hosts:

#!/bin/sh
echo "$(curl -s ifconfig.me) kanban-app" >> /etc/hosts
nginx -g "daemon off;"

This script is included and executed in the Dockerfile for the kanban-ui component. Place script in kanban-ui\add-ip-address-to-hosts.sh

Modified Dockerfile (file path: kanban-ui\Dockerfile):

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
RUN apk update && apk add curl
COPY default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/src/app/dist/kanban-ui /usr/share/nginx/html
COPY --from=build /usr/src/app/add-ip-address-to-hosts.sh /
CMD ["sh", "/add-ip-address-to-hosts.sh"]
EXPOSE 80

Lastly, I updated the proxy port in the Nginx configuration to match the NodePort:

location /api/kanbans {
    proxy_pass http://kanban-app:30000/api/kanbans;
}
location /api/tasks {
    proxy_pass http://kanban-app:30000/api/tasks;
}