Angular proxy config; proxying URL get parameters

Question

I need to add a proxy config to make GET requests to a webservice running on another domain (I'm testing on localhost:4200). I've added the following proxy.conf.json file to the root of the project

{
  "/address/*": {
    "target": "https://api-url.com/address/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

and added the --proxy-config=proxy.conf.json flag to the ng serve command in package.json. My GET request is pretty simple;

const url = `/address/cities?cityName=&zipCode=2000&languageCode=NL`;

const result = await fetch(url, {
  method: 'GET'
});

return await result.json();

I can see the proxy works as [HPM] GET /address/cities?cityName=&zipCode=2000&languageCode=NL -> https://api-url.com/address/ gets logged to the terminal, but the actual request doesn't work as nothing after /address/ is proxied. Is it at all possible to pass the URL params to the proxy?

What’s logged the console by the development proxy doesn’t show the full proxied URL. What are you seeing in the network tab? Do you get the response you expect? — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 29, 2019 at 12:30
Network tab shows the request URL as http://localhost:4200/address/cities?cityName=&zipCode=2000&languageCode=NL, but I get Internal server error as a response. If I try the request in my browser directly and replace localhost:4200 with the actual API url, the request works fine. Internal server error is the reply you get when required parameters are missing, so I assume that's the problem. — Alex
– Alex, Commented Apr 29, 2019 at 12:35
For troubleshooting, I created a simple server with route handler for GET /address/cities and using your exact proxy configuration I got the same proxy console output, but I was successfully able to pass query parameters cityName, zipCode, and languageCode using the exact URL you are using in your GET request. Your proxy configuration is correct. You will need to debug the response from the server, for example in your URL cityName doesn't have a value, could that cause a 500 error from the API? Does this API support CORS? It's hard to help without knowing the exact error happening. — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 29, 2019 at 14:13
Like I said, if I open the URL in the browser (so not through a fetch request in Angular) and replace localhost:4200 with the API url it works just fine, even with an empty cityName value. I don't know enough about their API to really answer anything else, so I think I'll have to find another way of solving the issue. Thanks for the help though. — Alex
– Alex, Commented Apr 29, 2019 at 14:54
@AlexanderStaroselsky Just to get back to this, turns out I had to remove the /address part from the target. So instead of "target": "https://api-url.com/address/", it has to be "target": "https://api-url.com/". — Alex
– Alex, Commented Apr 30, 2019 at 7:22

Maximilian Liesegang · Accepted Answer · 2019-07-29 10:00:26Z

5

As was posted in one of the comments the answer is to remove /address from the target.

{
  "/address/*": {
    "target": "https://api-url.com/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

We also had an issue with the URL parameters not being proxied correctly if the /was missing at the end of the target.

answered Jul 29, 2019 at 10:00

Maximilian Liesegang

9946 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular proxy config; proxying URL get parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related