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.
Add a comment
|
3 Answers
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/
}
5 Comments
Arul
Thank you so much.
Tawatchai Phetdumrongsakul
@Arul, is my solution work for you? If yes, could you please mark my answer and vote. Thanks
Tawatchai Phetdumrongsakul
@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:8087Tawatchai Phetdumrongsakul
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 > 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.
Hiep Tran
nice config, angular have proxy.conf.js + nginx setup to make frontend proxy to backend api
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 }, ...
]
...
6 Comments
Arul
i need some other way to deploy the build code in IIS. thanks
Mixalloff
Check changes in my answer. Is it what you needed?
Arul
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.
Mixalloff
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"")Arul
hi i used the second method you gave but now it shows "No 'Access-Control-Allow-Origin' header is present on the requested resource".
|
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.
2 Comments
Arul
can you suggest me some alternate solution for this. is there is any other way for adding this proxy
S34N
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).