Angular proxy to backend not resolved

Question

Trying to fix similar issue, but have no idea why it's not working.

I have API: localhost:8080/api/acl/authorize

Have next http client:

const AUTH_URI = "/api/acl/"

const httpOptions = {
  headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    }
  )
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) {
  }

  login(credentials: { login: string; passwordHash: string; }): Observable<any> {
    return this.http.post(AUTH_URI + "authorize", {
      login: credentials.login,
      passwordHash: credentials.passwordHash
    }, httpOptions);
  }
}

Add proxy conf:

{
  "/api/acl/authorize": {
    "target": "http://localhost:8080/",
    "secure": false,
    "pathRewrite": {
      "^/api/acl/authorize": ""
    }
  }
}

Starting with proxy option via ng serve --proxy-config proxy.config.json (in packge.json).

Also tried "target": "http://localhost:8080/api/acl/authorize". But still have incorrect request POST http://localhost:4200/api/acl/authorize instead of POST http://localhost:8080/api/acl/authorize

How can I fix this issue?

sounds to me like you are spoiling your own request with the `pathRewrite` section. try removing it, because your request is being redirected to POST localhost:8080/ right now — Andrei, Nov 28 '21 at 19:01
@Andrei ok, removed. Now looks like proxy is proxing, but I still have 404 error :/ — SlandShow, Nov 28 '21 at 19:14
what should your api url look like? if the final destination is `/acl/authorize`, that means that you should remove `/api` in the beginning and pathRewrite should look like `{"^api": ""}` — Andrei, Nov 28 '21 at 21:57

score 0 · Answer 1 · answered Nov 28 '21 at 21:43

When you proxy, you are still going to see the request to the same path of your application, so in your request, you are not going to see using the network at devtools a request to locahost:8080, instead, you are going to see a request to localhost:4200 but angular will do the proxy for you.

When you do the rewritePath you are telling angular to remove that path and replace it with nothing, so under the hood your request will look like:

http://localhost:8080

Probably you don't have this route, that's way you are getting 404.

To fix it, just remove the rewritePath and rerun your app.

Angular proxy to backend not resolved

1 Answers1