7

i am using proxy api setting for API calls in angular 5 as discussed in this website .https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/ this working properly when i use npm start. but when i build this and host it on IIS. it is not working. i believe proxy.config.json is not added inside dist folder.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Arul
  • 93
  • 1
  • 1
  • 6

3 Answers3

11

I am facing the same problem with you. My proxy.config.json has worked in my dev environment but does not work in PROD environment even I built with build --prod

After finding a way, I found a solution to make proxy backend with middleware instead (I used Nginx in my case).

If you also used Nginx, you can do proxy backend by configure this into your nginx configuration.

nginx.conf

location /api/ {
  proxy_pass      http://127.0.0.1:8087; 
  #all incoming http request with /api/ will be forwarded to http://127.0.0.1:8087/api/
}
hoefling
  • 59,418
  • 12
  • 147
  • 194
Tawatchai Phetdumrongsakul
  • 131
  • 9
  • 1
    Thank you so much. – Arul Mar 16 '18 at 07:29
  • 1
    @Arul, is my solution work for you? If yes, could you please mark my answer and vote. Thanks – Tawatchai Phetdumrongsakul Sep 23 '19 at 11:46
  • 1
    @S34N for more information. if location endpoint does not end with / (**/api not /api/**). All incoming request with /api will be forwarded to root proxy_pass endpoint. For example with above rule will be forwarded to `http://127.0.0.1:8087` – Tawatchai Phetdumrongsakul Mar 09 '20 at 10:49
  • Thanks, it saved my day. – Ashish Kumar May 28 '20 at 20:04
  • For more information in network detial, there will be 2 hops of network calling. 1. Client -> Nginx server with GET - /api/ 2. Nginx received traffic coming from /api/ with match rule of location /api/, it will forward this request to > http://127.0.0.1:8087/api/ I spent my 3 years of my dev & infra to understand the truthly concept of proxy_pass. Hope this will help you all. – Tawatchai Phetdumrongsakul May 29 '20 at 03:50
  • nice config, angular have proxy.conf.js + nginx setup to make frontend proxy to backend api – Hiep Tran Jan 15 '21 at 04:12
5

Proxy is working when dev server active. ng build doesn't start dev server, this command only build the project. Therefore you cannot use proxy in assembled project. You can use smth like ng serve --proxy-config proxy.config.json --prod for testing in prod environment with proxy

If you need to use another base url in production, you can use HttpInterceptor. Just create service like this

@Injectable()
export class InterceptorsService implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const proxyReq = req.clone({ url: `${ BASE_PATH }${ request.url }` });
      return next.handle(proxyReq);
    }
}

and add it to providers in your module

...
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorsService, multi: true }, ...
]
...
Mixalloff
  • 827
  • 4
  • 10
  • i need some other way to deploy the build code in IIS. thanks – Arul Feb 22 '18 at 07:21
  • Check changes in my answer. Is it what you needed? – Mixalloff Feb 22 '18 at 08:01
  • Thanks for helping out .i am a beginner in angular i am unable to understand your suggestion. my service url will be http:Asfgk005i:8000/api/name?courseId="embeded". since service is not working i have used "http:Asfgk005i:8000" in "proxy.config.json". in service component i have http.get("/api/name?courseId="embeded""). now how to refactor this according to your code. – Arul Feb 23 '18 at 09:12
  • The InterceptorService intercept all requests from your app and modify it. If you need to change base url from `http://your-domain` to `http://Asfgk005i:8000` in all requests than change BASE_PATH in my example to `http://Asfgk005i:8000`. Another way is using full url in your services. You can save constant `export const BASE_URL = 'http://Asfgk005i:8000' ` and add it before all of you urls: `http.get(BASE_URL + "/api/name?courseId="embeded"")` – Mixalloff Feb 23 '18 at 10:37
  • hi i used the second method you gave but now it shows "No 'Access-Control-Allow-Origin' header is present on the requested resource". – Arul Feb 26 '18 at 06:50
  • The server must allow cross-origin requests (it must return "Access-Control-Allow-Origin: * " header in response). If you haven't access to server code, than you need to create a proxy server. Maybe it will help: https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present – Mixalloff Feb 26 '18 at 07:54
1

This configuration is ONLY for your development setup and should not be used in production. You need to include other solutions for your production environment to run.

Gaurav Rao
  • 97
  • 4
  • 1
    can you suggest me some alternate solution for this. is there is any other way for adding this proxy – Arul Feb 22 '18 at 07:27
  • Yes, you can have this in production. How? I have a set-up an angular app forwarding to a java microservice. 1. Strictly allow the angular-app Cross-Origin from the Angular app to the java Gateway Microservice. 2. Add Security in-memory authentication (Authentication & Authorisation) between the angular app & the microservices. (Case closed). – S34N Mar 10 '20 at 12:14