Access api - CORS - failed

Hi :),
I hope, this is the right place for my question:
In my current project, I’m trying to get data from an api. It is my first angular project, so please excuse my inexperience.
The data is on a server on my pc: http://localhost:8080/api/v1/xy/list

When I try to access the data with my browers, there is no problem.
But when I implement the connection in my app.component.ts
this.rowData = this.http.get('http://localhost:8080/api/v1/xy/list'
it fails.

Checking the result, following notification occurred:
Access to XMLHttpRequest at 'http://localhost:8080/api/v1/xy/list' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2863 GET http://localhost:8080/api/v1/xy/list net::ERR_FAILED

I tried to fix it with following adjustment in the C:\Users\Micro\my-app\proxy.conf.json
{
"/api": {
"target": "http://localhost:8080/api/v1/xy/list",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
According to this page: https://levelup.gitconnected.com/fixing-cors-errors-with-angular-cli-proxy-e5e0ef143f85
Starting ng again as follows: ng serve --proxy-config .\proxy.conf.json succeed, but the error stays the same. Still no access to the api.

Have you any idea what I’m doing wrong?

Comments

[Nino Filiu]

Hello Melanie!

Yes this is the right place for this kind of questions, although there has been many questions on the subject on Stack Overflow

I highly recommend you to read MDN's guide on CORS which provides a good introduction to the subject and indicates how to fix you issue, but basically it goes like this:

Your client running at localhost:4200 makes a request to your server at localhost:8080. Since localhost:4200 is not at the same place as localhost:8080 (that's what we mean by "different origin"), they could be owned by different entities, and as a security mechanism, your server must explicitly allow incoming requests from localhost:4200, else they'll be dropped by your browser with the error you're seeing (Access to XMLHttpRequest...)

The fix that the article presents might work, but what it does under the hood is that instead of making calls to localhost:8080 you make calls to a proxy at localhost:4200/api (same origin as your client) and the angular CLI then makes the call, which won't be dropped by CORS because only browser block because of CORS. I wouldn't recommend going this way.

Instead, try to get a your API to respond with these headers when requested with an OPTIONS request:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *

This basically means that your API allows calls from everyone, with any methods, and with any headers. That's a bit permissive, you should not use that in production, but when developing locally, that should shut down all CORS errors! Does it work?

[Melanie-Koeln]

Hey Nino,

thank you very much for your explications. :) I read the article, but still stuck at the same point. Awfully I have currently no access to change the api. So setting Access-Control-Allow… is no option.

But the workaround with the proxy should work or not?

Is there perhaps something wrong in the proxy.conf.json?

I searched for a solution for some hours now, but still no solution in sight. :(

edit:
According to the ng, the proxy is running properly:

C:\Users\Micro\my-app> ng serve
⠋ Generating browser application bundles...[HPM] Proxy created: /api* -> localhost:8080/api/v1/xy/list
HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
√ Browser application bundle generation complete.