0

i was struggling with this issue for several day, trying all possible suggestions, but with no luck. facing the problem with CORS running my angular app on virtual machine using the following command: ng serve --host=0.0.0.0 --port=4201 --disable-host-check --proxy-config

the back-end URL i'm trying to reach looks like this: http://sse.mybackend/events i've created the "proxy.conf.json":

{  "/client-api/*": {
    "target": "http://sse.mybackend/events",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true

  
     }
    }

i was trying the following URL in the client call:

`http://localhost:4201/client-api/events`,

but the browser responds me:

GET http://localhost:4201/client-api/events net::ERR_CONNECTION_REFUSED.

obviously not finding anything running on this URL. Looks like the config file haven't been applied.

Could you please help me to configure it correctly? Thanks in advance, Liudmila

Liudmila Dobriakova
  • 71
  • 1
  • 9
  • Does this answer your question? [Trying to use fetch and pass in mode: no-cors](https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors) – DonJuwe Feb 15 '21 at 15:38

2 Answers2

1

You have to call api in service like this

return this.httpclient.get('/client-api/')

bcz you call backend api in client api.

ANKIT MISHRA
  • 558
  • 4
  • 13
  • in the proxy.config i have exactly like this:` "/client-api/*": { "target": "http://sse.myback-end.eu/events", "pathRewrite": { "^/client-api": "" }, "secure": false, "changeOrigin": true }` and in the client i'm calling it in this way: this.httpclient.get(`http://localhost:4201/client-api/events`). So what is wrong with the configuration i'm using? I also have this lines in back-end part: app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-Headers","Origin, X-Request-With, Content-Type, Accept"); – Liudmila Dobriakova Feb 17 '21 at 11:44
0
Two solutions:-

1. Ask backend team to add or allow cors in backend api's
package is npm i cors.

In angular you have to create a proxy.confi.json and add code.
{  "/client-api/*": {
    "target": "Backend api Url",
    "secure": false,
    "changeOrigin": true

  
     }
    }


Angular.json
"architect": {
    "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "project-name:build",
                "proxyConfig": "src/proxy.conf.json"
            },
          }
}
ANKIT MISHRA
  • 558
  • 4
  • 13