No 'Access-Control-Allow-Origin' header is present on the requested resource (Ingress)

Question

I have a spring boot project for backend, and an angular project for front-end. I am not able to get the response from backend to front-end through ingress. The backend service is running on port- 8000 and front-end service is running on the port-80

Both the endpoints- backend(http://localhost:8000/hello) and frontend(http://localhost:80) are accessible individually. I want the angular to interact with backend service through ingress, which is not working

Ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: api-call-app
annotations:
  nginx.ingress.kubernetes.io/rewrite-target: /
  nginx.ingress.kubernetes.io/enable-cors: "true"
  nginx.ingress.kubernetes.io/configuration-snippet: |
       more_set_headers "Access-Control-Allow-Origin: $http_origin";
  nginx.ingress.kubernetes.io/cors-allow-origin: "*"
  nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE"
  nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
  nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-CSRFToken"
spec:
  rules:
  - host: localhost
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: angular-service
            port:
              number: 80
      - path: /hello
        pathType: Prefix
        backend:
          service:
            name: springboot-service
            port:
              number: 8000

Spring boot code

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class HelloController {
    

    @GetMapping(value= "/hello", produces="text/plain")
    public String hello()
    {
        return "hello";
    }
...

Angular code

export class HelloComponent implements OnInit {

  resp: any
  constructor(private http :HttpClient) { }

  ngOnInit(): void {

    let response= this.http.get("/hello", {responseType: 'text'});
  response.subscribe((data)=>this.resp=(data));  

  }


}

The error that I see is-

Access to XMLHttpRequest at 'http://localhost:8000/hello' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Did you try to manually inspect the response (httpie / curl / ... ) ? — Thomas

Dhruv Singh Dhruv Singh · Accepted Answer · 2021-10-25T13:44:31

You need to create a proxy configuration file under the src folder. i.e /proxy.conf.json

{
"/api/*": {
    "target": "http://localhost:8090",
    "secure": false,
    "logLevel": "debug"
  }
}

Note: “target”: “http://localhost:8090" is the server side application and it will be different for different servers. and secure is set to false as we are running the server in http schema that is in non secure mode.

Next, add proxyConfig key to the angular.json file as shown below.

  "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "move-safe:build",
        "proxyConfig": "src/proxy.conf.json"
      }

https://levelup.gitconnected.com/fixing-cors-errors-with-angular-cli-proxy-e5e0ef143f85

No 'Access-Control-Allow-Origin' header is present on the requested resource (Ingress)

1 Answers