0

I have an angular service that has a GET request with params currentPage and postsPerPage. I'm trying to pass the parameters to an azure function and I'm following a tutorial which tells me to configure proxies.

if I use the this url which is provided when I run func start

 }>(`http://localhost:7071/api/GetListingsWithPagination/`, { params })

then I can hit the endpoint and the error is currentPage is undefined. Which is fine because I'm not passing currentPage with proxy.

So moving on to configuring proxy:

enter image description here

with this configuration I have my angular service


using this endpoint in angular service

      }>(`https://[sitename].azurewebsites.net/api/listings/${postsPerPage}/${currentPage}`, { params })

but it's returning

401 unauthorized in browser console and never outputs in azure function console.

How can I get my params to work?

angular service

  getWins(bidderId: string, currentPage: number, listingRoute: string) {
    const postsPerPage = 10;
    const queryParams = postsPerPage + "/" + currentPage;

    const params = new HttpParams()
      .set("bidderId", bidderId)
      .set("listingRoute", listingRoute);
    return this.http
      .get<{
        message: string;
        posts: any;
        maxPosts: number;
        activeBidsList: string;
      }>(`https://[sitename].azurewebsites.net/api/listings/${postsPerPage}/${currentPage}`, { params })
      .pipe(
        map(retrievedData => {
          return {
            posts: retrievedData.posts.map(post => {
              return {
                title: post.title,
                startingBid: post.startingBid,
                increments: post.increments,
                shippingCost: post.shippingCost,
                bidderId: post.bidderId,
                id: post._id
              };
            }),
            maxPosts: retrievedData.maxPosts
          };
        })
      );
  }

azure function

var MongoClient = require('mongodb').MongoClient;
//var Post = require('./model/post');

module.exports = function (context, req) {


  MongoClient.connect(process.env.CosmosDBConnectionString, (err, client) => {

    let send = response(client, context);
    if (err) send(500, err.message);


    console.log("DBNAME: " + process.env.dbName);

    let db = client.db(process.env.dbName);

    let params = ({ currentPage, postsPerPage } = req.params);





    let postPerPage = +params.postPerPage;
    let currentPage = params.currentPage;
    console.log(postsPerPage);
    console.log(currentPage);
    return;
  });
}
user6680
  • 79
  • 6
  • 34
  • 78
  • Does this answer your question? [When I am running azure HTTP Trigger function i am getting 401 unauthorized](https://stackoverflow.com/questions/51130370/when-i-am-running-azure-http-trigger-function-i-am-getting-401-unauthorized) – Phani Mahesh Mar 10 '20 at 18:31
  • I updated to ```anonymous``` from ```function``` but it still doesn't hit azure function. Azure function console output still not outputting anything. So it's not hitting the proxy api endpoint correctly still. – user6680 Mar 10 '20 at 18:53

1 Answers1

0

According to the description of your question, it seems your function is on azure portal and the backend url is deployed on local. I think you need to deploy the project which corresponding to the http://localhost:7071/api/GetListingsWithPagination to azure funciton and then put its url on azure to the "backend url" input box. If you just run it on local, your azure function can not call it successfully and the proxy also can not route to this url.

Update:

I'm a little confused about the latest description in comments, so here I provide a sample for your reference.

What I mean is you can deploy your localhost api as a function to azure portal, after deploy it to azure you can get the function url of it (such as https://fromlocal.azurewebsites.net/api/HttpTrigger1). Then you can go to your nodejs function to configure the proxy, set this url as the backend url(shown as below screenshot): enter image description here

Then, you can request the route url(proxy url) in your nodejs code. enter image description here

By the way, your original requirement is request the localhost api. For this requirement, you set the proxy to call the localhost api. But you have deploy the localhost api as a function on azure, so I think you can also request the function's url directly(without setting the proxy).

Hury Shen
  • 14,948
  • 1
  • 9
  • 18
  • I've deployed to app service, but I still got the 401 error. Do you think it's related to the query params too? I have ```currentPage``` and ```postsPerPage``` params configured in proxy settings, but not the bidderId or listingRoute query params as you can see from image. https://postimg.cc/6T0NDLTZ Any suggestions? – user6680 Mar 12 '20 at 01:24
  • Hi @user6680, could you please create a simple function(without any param) on azure portal first and set it to the backend url of your proxy. Test if it can be route successfully. – Hury Shen Mar 12 '20 at 01:32
  • I removed the query params, but same issue. https://postimg.cc/H8gJh0Zn – user6680 Mar 12 '20 at 02:01
  • @user6680 So the issue was not caused by the params, I test it in my side(I use .net) with simple function without any parameters and it works fine. Could you please share the screenshots of your function and the proxy page ? – Hury Shen Mar 12 '20 at 02:17
  • Shouldn't it at least hit the endpoint and output some of my console.logs? Also tried postman, but 401 there too. I guess that's expected. Nothing outputs in the azure function console when the api call is made. Here you go:https://pastebin.com/jAmbRMrK – user6680 Mar 12 '20 at 04:09
  • Hi @user6680, I create two simple functions and set the proxy for your reference. Please check the update in my answer. – Hury Shen Mar 12 '20 at 05:58
  • To follow your example, I removed params ```/``` + query params ```&=``` completely. If I put the function app url directly in angular service ```http://localhost:7071/api/GetListings``` then it hits then endpoint no problem, but if I add my proxy url, then it says 401 unauthorized still. I'm starting to feel like this is some sort of access issue. I used this configuration: https://postimg.cc/2bC5ndPh . I deployed it to app service too: https://postimg.cc/hzfDPnvw/a2350ad4 – user6680 Mar 12 '20 at 14:08
  • @user6680 You configured a gateway ? Or I don't think you can request the "http://localhost:7071/api/GetListings" directly from azure. In your first screenshot, I see you still set "http://localhost:7071/api/GetListings" as the backend url. But I mean you should deploy the code of this api rul(http://localhost:7071/api/GetListings) do azure as a azure function. And then use the request url of this function as the backend url. – Hury Shen Mar 13 '20 at 06:53
  • I'm a little confused with what you're asking me to do. But if you look at this azure tutorial video at this moment 11:24. https://youtu.be/89WXgaY-NqY?t=684 The guy from Microsoft talks about the backend URL. I tried it like he did ```https://localhost/api/GetListings``` or ```http://localhost/api/GetListings``` but same issue. He's doing it from postman so the call is local. – user6680 Mar 13 '20 at 19:08
  • I made a change and I'm no longer getting the 401 error. Instead postman hangs on sending request for awhile and then throws 502 - Web server received an invalid response while acting as a gateway or proxy server error I think my problem has to do with the route template field in integrate. I had it blank before. I have it matching now. This is the integrate page: https://postimg.cc/CdXgrdgX and proxy page: https://postimg.cc/d71NKmRB Any ideas? – user6680 Mar 13 '20 at 23:20