I have configured a proxy for api calls to a serve in localhost:5000.
However, the proxy is being directed to localhost:4200 .i.e the angular application.
"Http failure response for http://localhost:4200/api/: 404 Not Found"
my proxy.conf.json:
{
"/api": {
"target": "https://127.0.0.1:5000/",
"secure": false,
"changeOrigin": true
}
}
my call to the url in a service :
private apiurl = "/api";
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.apiurl);
}
I have edited 'start' in package.json
"start": "ng serve --proxy-config proxy.conf.json",
I am not getting any compiling errors.
I want /api to go to the target provided in the proxy conf file
I am extremely sorry for this question, the issue was in my backend routing
Related
I am developing an app using Angular 7 and Apollo GraphQL client and I am trying to use the client devtools for Chrome. If I understood the documentation correctly, the only thing that I have to do is to run my app in a non-production environment and the Apollo tab will appear on the Google Chrome development tools.
Unfortunately this is not happening. The Apollo Devtools icon appears on my browser, but the Apollo tab does not appear on the devtools.
Am I missing some configuration?
I also tried to force the devtools to appear, by adding: connectToDevTools: true to my GraphQL module (code below), but this didn't solve the problem.
const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
connectToDevTools: true
};
}
#NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
I found out what the problem was: I was having a CORS error when I tried to use my Graphql endpoint from the Angular development server (localhost:4200), so I created a proxy that pointed to my endpoint:
{
"/graphql/*": {
"target": "https://my-endpoint/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
And changed the Graphql URL to: http://localhost:4200/graphql. With this I was able to solve my CORS issue, however it seems that the Apollo Dev Tools also uses the /graphql URI.
So I changed my proxy configuration to:
{
"/stg_graphql/*": {
"target": "https://my-endpoint/graphql",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/stg_graphql": ""
}
}
}
And pointed the graphql to: http://localhost:4200/stg_graphql. When I did this, everything started working.
Note: to run the development server with the proxy I am using: ng serve --proxy-config proxy.config.json.
I have a Spring Boot 2.0.2 application. When I browse to the following URL: https://my-domain-name/my-application-name/actuator, I'm getting the following output:
{
"_links": {
"self": {
"href": "http://my-domain-name/my-application-name/actuator",
"templated": false
},
"health": {
"href": "http://my-domain-name/my-application-name/actuator/health",
"templated": false
},
"info": {
"href": "http://my-domain-name/my-application-name/actuator/info",
"templated": false
}
}
}
As you can see, the content is OK but all links start with 'http', and not with https. Nevertheless, I'm accessing the URL with HTTPS.
The domain name I'm trying to reach is an AWS Route 53 record, with an alias to an AWS ELB. This ELB redirects the call to a target which is a K8S cluster. The pod itself is running Nginx which redirects the URL to another pod which runs Spring Boot with an embedded Tomcat and it's serving its content using HTTP and port 8080.
For the Nginx, there's a proxy pass configuration:
location /my-application-name { proxy_pass http://my-application-name; }
The following headers are being added:
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
... so that Spring Boot will know the 'original' request.
Anybody an idea what I'm doing wrong? It seems like the actuator implementation is not taking into account the HTTPS protocol
I solved the issue by adding this code block in a configuration class:
#Bean
public FilterRegistrationBean forwardedHeaderFilterRegistration() {
ForwardedHeaderFilter filter = new ForwardedHeaderFilter();
FilterRegistrationBean<ForwardedHeaderFilter> registration = new FilterRegistrationBean<>(filter);
registration.setName("forwardedHeaderFilter");
registration.setOrder(10000);
return registration;
}
It seems like the ForwardedHeaderFilterdoes take the X-Forwarded-Proto header into account. Although it's still very unclear why the actuator implementation doesn't do this by default (because the other X-Forwarded headers are being treated correctly)
I'm working on Java project with Spring-4 and Angular-5. Session is generated on spring side.
So, I'm not able to generate this session from angular Service. It's working on Postman and I'm able to get response in PostMan.
But It's not working with Angular post method call.
So, I thought that it's may be a issue of Proxy. (Corrent me If i'm wrong).
So, My local Url is :- http://localhost:8080/MacromWeb/ws/login
So, How Can I make a proxy.conf.json file?
So for that I have added this code to my package.json file,
"start": "ng serve --proxy-config proxy.conf.json",
I have created a new file called proxy.conf.json.
And Put this code in it.
{
"/": {
"target": "http://localhost:8080/MacromWeb/ws",
"secure": false
}
}
Then I tried with ng serve and npm start both.
Postman Screenshot.
You can achieve this through proxy, You need to provide proper values in the proxy config.
/* should work too, but if MacromWeb is common in API URLs, then instead of / provide /MacromWeb/*
proxy.conf.json looks something like this,
{
"/MacromWeb/*": {
"target": {
"host": "localhost",
"protocol": "http:",
"port": 8080
},
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Hope it helps.
Say we have a server running on http://localhost:3000 and we want all calls to http://localhost:4200/api to go to that server.
In our proxy.conf.json file, we add the following content
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
More on this: here
Using webpack dev server, I'd like to have a proxy that proxies everything to the server, except my app. Except that the api, which has an endpoint under my app, should be proxied:
/myapp/api/** should be proxied
/myapp/** should not be proxied (any
/** should be proxied
The following setup does this using a bypass function, but can it be done declaratively, using a single context specification?
proxy: [
{
context: '/',
bypass: function(req, res, options) {
if (
req.url.startsWith('/app') &&
!req.url.startsWith('/app/api')
) {
// console.log ("no proxy for local stuff");
return false;
}
// console.log ("Proxy!")
},
// ...
},
],
According to https://webpack.js.org/configuration/dev-server/#devserver-proxy webpack dev server uses http-proxy-middleware and at its documentation (https://github.com/chimurai/http-proxy-middleware#context-matching) you can use exclusion.
This should be working in your case:
proxy: [
{
context: ['**', '/myapp/api/**', '!/myapp/**'],
// ...
},
],
I'm trying to set proxy headers for angularcli. Here's what I have so far in my proxy.config.json file:
"/api": {
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug"
But I haven't had any luck so far, perhaps I'm missing something (probably in another file). Any suggestions would be much appreciated.
Angular-cli uses http-proxy-middleware https://github.com/chimurai/http-proxy-middleware
there is an option called headers that you can use: https://github.com/chimurai/http-proxy-middleware#http-proxy-option
example:
"/api":
{
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug",
"headers": {"host":"www.example.org"}
}
You can modify both request and response headers and request is easy with the code from #AhmedMusallam answer but for response headers you'll need to change file to proxy.config.js and modify proxy config file to look like this:
const PROXY_CONFIG = {
"/api": {
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug",
"onProxyRes": function (proxyRes, req, res) {
proxyRes.headers['Access-Control-Allow-Headers'] = 'Authorization';
},
},
};
module.exports = PROXY_CONFIG;
I am using Angular CLI v13 and its uses bypass interceptor for modifying the headers.
sample code of proxy config put it in a file and name it proxy.conf.js (you can choose any suitable name of the file as you like)
const PROXY_CONFIG = {
"/api/proxy": {
"target": "http://localhost:80",
"secure": false,
"bypass": function (req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
req.headers["X-Custom-Header"] = "yes"; // adding oe setting header
res.removeHeader('X-Header-Name'); //removing header
}
}
}
module.exports = PROXY_CONFIG;
and then simply run serve command with proxy.
ng serve -proxy-config proxy.conf.js