0

Simple setup:

  1. React App created with create-react-app
  2. ASP.NET Core web API - a couple of controllers (currently no security until I make it work)

Both the API and Application are deployed to Azure. When I run the app locally with configured proxy (I contact the deployed API on Azure) it works correctly makes the calls. If I try the API directly from my machine it works too (PostMan for example)

When I open the deployed React APP - The application loads correctly but the call to the API doesn't get proxy(ed). What I mean it's not returning 404, 403 - it returns status 200, but makes the call to the app itself instead of proxy the request to the API.

I've tried both using "proxy" configuration in package.json as well as using "http-proxy-middleware". Both cases work with locally running app, but not deployed. Here is the configuration of the proxy:

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://XXXXXX.azurewebsites.net',
      changeOrigin: true,
    })
  );
};

I suppose it's something related to the configuration of the node server used when I deploy to azure, but I don't have a clue what.

I've used the following tutorial for deployment: https://websitebeaver.com/deploy-create-react-app-to-azure-app-services

But as seen from content there is no proxy part in it.

Todor Paskalev
  • 66
  • 4
  • Does this answer your question? [create-react-app proxy request fails with 404 when backend is hosted on Azure](https://stackoverflow.com/questions/49581772/create-react-app-proxy-request-fails-with-404-when-backend-is-hosted-on-azure) – Ecstasy Jan 06 '22 at 05:11
  • You can refer to [React — How To Proxy To Backend Server](https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347), [Configure a Node.js app for Azure App Service](https://learn.microsoft.com/en-us/azure/app-service/configure-language-nodejs?pivots=platform-linux)and [Understand and solve Azure Active Directory Application Proxy CORS issues](https://learn.microsoft.com/en-us/azure/active-directory/app-proxy/application-proxy-understand-cors-issues) – Ecstasy Jan 06 '22 at 05:13
  • The first suggested post doesn't answer the question - in their case there is error response. In my case the app makes a request to the wrong url - as stated in the question the proxy configuration is not used at all. From the list of possible posts I looked at configure node on azure - but I can't find anything specific to the proxy middleware in it – Todor Paskalev Jan 06 '22 at 09:53

1 Answers1

0

After long troubleshooting I realize the issue was due to wrong understanding of the proxy configuration. So I was not realizing the proxy configuration is respected only in debug mode and totally ignored into prod build. And of course while debugging the issue I was not realizing the Azure Deployment pipe was doing production build. So the resolution was to detect the production/dev on application layer and inject correct URL. Here I hit another issue - process.env.NODE_ENV, which I was using to distinguish between development and production was undefined into my index.tsx - it was available in App.tsx and all its children, but not in index.tsx where my dependency container was initialized. What resolved my issue is package called dotenv. Then I've just imported it into index.tsx and the process.env was available.

import * as dotenv from 'dotenv';
Todor Paskalev
  • 66
  • 4