Azure ignores applicationUrl port settings

Question

I have developers a web application using Visual Studio - the back end (WEB API) is written in .NET CORE and the front end is a ReactJS application.

Using my local development environment I am running the WEB API on port 5000, i.e. I have the following configuration within my launchsettings.json file:

"API": {
  "commandName": "Project",
  "launchBrowser": true,
  "launchUrl": "",
  "applicationUrl": "http://localhost:5000",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Production"
  }

When testing, I can see that the WEB API is listening on port 5000 and my ReactJS web app is successfully able to invoke the end points.

With my local dev environment working as expected I then proceeded to setup my Azure environment (i.e. I created a resource group using the "Web App + SQL" resource template). I then updated the .NET CORE WEB project such that the launchsettings referenced the new AZURE domain:

    "API": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "",
      "applicationUrl": "https://demoportal.azurewebsites.net:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }

I then configured all the resources and on completion I published my web app to AZURE using the visual studio "Publish" option (as listed under the "Build" menu).

When I opened my Azure hosted web app (https://demoportal.azurewebsites.net) the website loaded as expected (great) but when I attempt to login I could see the request was timing out and the browser console was reporting:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://demoportal.azurewebsites.net:5000/api/user/login. (Reason: CORS request did not succeed).

Given the above error I assumed this was in fact a CORS issue, so I spent alot of time researching this issue. After exhausting all CORS options I concluded that this was not the cause, I then experimented with the URL to see what would happen if I omitted the port number - i.e. I configured the ReactJS app as follows:

https://demoportal.azurewebsites.net:5000/api ==> https://demoportal.azurewebsites.net/api

As soon as I did the above everything started working!

Although this is working I need to understand why. My .NET CORE WEB API project is still configured using:

      "applicationUrl": "https://demoportal.azurewebsites.net:5000",

Why is this being ignored (most likely there is an AZURE configuration that is overwriting this setting)?

Best regards.

Spencer

Answer 1

Hi Ryan,

Thanks for your reply - please see my reply embedded below:

Krestrel is usually denoted by "commandName": "Project" in the launchSettings.json. These launch settings only apply to your local environment, there you need to change your application url setting back to "applicatinUrl": "http://localhost:5000".

So launchSettings.json is "only" used in my local environment - i.e. not used when I publish to Azure (I did not realise this was the case and hence my confusion). Thanks for the clarification.

So, you can get around CORS issue by using relative paths (.e.g ~/api/method) rather than a full URL. This will allow you to test your changes locally and push them to Azure without having things break.

I updated my React front-end to use relative paths and this also addressed the CORS issue (thanks).

Another option would be to use appsettings.json that configures sets ApiEndpoint which you can then add to your Azure App Service Application Settings.

I am not sure I understand what you mean by setting "ApiEndpoint" (perhaps you can provide a link explaining this configuration). I did however do some searching and I found a very useful YouTube video explaining how to configure appsettings.json for development/production - see: h9hlN0DOKRM

With regards to my appsettings.json my current setup does not have any configurations that set the port my WEB API is listening on. Am I correct in thinking that if no specific port configuration options reside within appsettings.json then by default the WEB API (for production) will be configured to listen on port 80/443?

Thanks again for your help.

Spencer

Answer 2

Hi Spencer,

Although this is working, I need to understand why. My .NET CORE WEB API project is still configured using:

   "applicationUrl": "https://demoportal.azurewebsites.net:5000",  

When creating a .NET Core web application, you have two options to debug your application, use IISExpress or krestrel. The port :5000 is used for krestrel which is a .NET Core web server implementation. Krestrel is usually denoted by "commandName": "Project" in the launchSettings.json. These launch settings only apply to your local environment, there you need to change your application url setting back to "applicatinUrl": "http://localhost:5000". In no way does Azure overwrite any local settings you have.

With regards to your deployed React with API, it depends on the hosting. If you deployed API along with your web app, which it appears you did. So, you can get around CORS issue by using relative paths (.e.g ~/api/method) rather than a full URL. This will allow you to test your changes locally and push them to Azure without having things break. Another option would be to use appsettings.json that configures sets ApiEndpoint which you can then add to your Azure App Service Application Settings.

Regards,
Ryan