java API and angular SPA in the same Azure App Service

Question

can i run, in one single app service, my java API as a virtual application under /api and my frontend angular SPA on under / ?

in my application settings:

• i've set Java to version 8
• i've set the web container to Tomcat 9
• in the virtual application section i have:
  • virtual directory: / and path: site\\wwwroot
  • virtual directory: /api and path: site\\wwwroot\\api
  • both are marked as Application

After i deploy both virtual apps, when i go to the app service URL, i get the frontend correctly, but there is also a call to the API which stays in pending for a couple of minutes and then ends in a 500 error. If i try to access the API directly, i get the same 500 error.

The API was built with Spring and it's web.config file i have set:

<applicationInitialization doAppInitAfterRestart="true">
            <add initializationPage="/api"/>
            <add initializationPage="/api/health"/>
            <add initializationPage="/api/info"/>
        </applicationInitialization>

I want both, API and SPA, to be on the same domain. Currently, API is accessible from any domain, no restrictions on it.

What am i doing wrong? How can i make it work?

Answer 1

Per my experience, it's not necessary to create virtual directory when you deploy your web project to Azure App Service.

After you set application settings on portal,

You could put your project's generated war package under the D:\\home\\site\\wwwroot\\webapps directory on KUDU and restart your application.

Please note that if you set the name of the war package to ROOT.war , you will be able to access your application directly through the domain name ,such as http://jaygong.azurewebsites.net/ without adding your war package name in your request url.

You could also access static files directly through the path,such as http://jaygong.azurewebsites.net/image/image.jpg .

---

Updated answer

Per my experience,you could use two ways to call another app service API in your spring boot app service.

1.The front page of the spring boot calls the background method, transfer messages between another app service API and itself via the HTTP request, and returns the result to the front end. CORS issue does not exist in this way.

2.The front page of the spring boot calls another app service API directly. You could refer to the js below which in this thread Enable CORS AngularJS to send HTTP POST request

allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  if ('OPTIONS' === req.method) {
    res.send(200);
  } else {
    next();
  }
};

app.use(allowCrossDomain);

Hope it helps you.