We have an Angular5 application with a DotNet OData backend API. The application is hosted in a Web Application with a virtual directory for the Angular5 app and another virtual directory for the DotNet backend. The web application is secured by Azure AD, with an Azure AD Application defined for the web site.
This all works perfectly. We have no authentication code in the front end (except for 'withCredentials: true' set in the service calls) but apparently having the whole application protected by Azure AD makes the front end able to call the backend without issue (Azure makes you authenticate when you access the Angular5 front end).
The problem comes when we try to develop the front end. When developing Angular5 one needs to run the Angular5 code locally, so I've set up a web app which hosts only the backend code and point the local configuration for the Angular5 app there. This fails with the first backend call with a 401. One of our developers discovered that if you simply plug in the URL to the backend with the same browser (i.e. copy the failing call from the browser network developer tab into a new browser tab in the same browser) you will go through the authentication process and then when you run the local Angular5 app again it works. We thought we had found a workaround until we noticed that for some reason this only seems to fix the "read only" calls. GET works, OPTIONS works but POST fails with a 401. I put some debugging code in the backend but it seems this code does not even get called (i.e. Azure, not our backend, is blocking the call).
So I've tried to figure out how to get the local Angular5 instance to behave as the one hosted by the Web app but I can't figure out what I need to be doing. I have also been unable to find anyone else doing this so I can't find a solution.
I have tried various solutions of actively getting a token (e.g. setting up /.auth/me, using adal5 to "login", etc.) for the front end but it seems every possible solution is defeated by CORS in the end. Our backend has an Allow-Origin for localhost:4200 but this doesn't apply to login.windows.com for the authentication step. I tried putting localhost:4200 in the CORS setting on the Azure Web App but then it complains about an Allow-Authentication header being missing and I have no way to force Azure to provide that. I read online that this is happening because Azure didn't expect people to be using "cookie authentication" so after some research I found that "cookie authentication" was being used because of the "withCredentials: true" calls, so I changed all of those to false. Then the Allow-Authentication failure goes away but I just run into more CORS failures during the authorisation (login.windows.com).
So I'm really stuck here. I can't believe I'm the only person on earth who's trying to run a local instance of Angular5 against an Azure AD secured Azure Web app backend but I can't find any examples anywhere of people successfully doing this. I also would like to avoid having to do some elaborate local authentication because the code works perfectly as-is when hosted on the same Azure Web app as the backend. Does anyone have a setup like I describe that is working?
Related
I have two blazor server (.NET 6) apps running as app services in Azure. The apps are to be "hidden" behind an application gateway to give users the impression that they are visiting the same site. Traffic is to be directed using parts of the url i.e {{domain}}/* go to app 1, {{domain}}/{{keyword}} go to app 2.
This has been set up, using routing rules on the gateway and the routing works as expected, with requests reaching the correct apps. However, when reaching app 2, the websocket immediately disconnects, killing blazor in the process. Error message displayed in the console of app 2. The apps are very barebones, containing very little code as this is a POC.
Things I have tried:
Use Azure SignalR and not using it.
Configured both apps to use websocket
Use different routing rules for the two apps and use the same routing rule with two backend pools.
Use Azure Front Door, but the same issue persists.
Randomly toggle settings
Added options.ServerStickyMode = ServerStickyMode.Required; to the signalR config in program.cs
Added `#inject Microsoft.AspNetCore.Http.IHttpContextAccessor _HttpContext
#{
_HttpContext.HttpContext.Response.Headers["Cache-Control"] = "no-store";
}` to _Layout.cshtml with the _HttpContext. yadayada both inside the body and outside.
Maybe the most frustrating thing is that it works just fine when reaching the first app. I have tried switching the deploys, i.e. deploy app 1 code to app 2 service and vice versa, to no avail.
Have anyone else experience a similar thing? Any config or code changes I have missed?
I am making my first mobile app using Xamarin.Forms and FreshMVVM as the architecture and I want this app to get info off my SQL database (which is located in azure) by calling an API Rest. I already know how to develop an Api, and all the SQL and Azure related stuff, as well as how to get info from my API.
But what I don't know is how to access this API when the project in which is created is not executed, in other words, I don't know how to make my API Rest accessible all the time, so the App can access to it whenever is needed.
How do you do this?
Thank you all for your time, hope you have a good day.
You need to publish the API to a web host. Azure App Services. AWS. Digital Ocean VM running a web server. Possibly GoDaddy, though I have never used them. Your own server.
I have two Web Apps, inside the same App Service. One is a back-end portion (with API on it, using .NET Core, SSL cert installed) and the other one is the front-end (ReactTS, created using create-react-app).
When I try to call the API method (an Auth method) using my Front-end I got this message as response:
Login failed: The resource you are looking for has been removed, had
its name changed, or is temporarily unavailable.
-404 error
Another fact is, if I run my ront-end solution locally, I can use the API (published on the Web App), normally.
My API URL is set inside the package.json file, as proxy.
My first thought was about an CORS problem, but it throws a 404 error.
Any configuration that I can do on my Azure, or something that I need to change in my application to allow my front-end to communicate with my API?
If we publish two web applications to one Azure Web App, the later one will cover the first one. It will cause that the first web application can't work. I suggest you create different Azure Web Apps for your web applications. You could choose one Azure Web App Plan for your Azure Web Apps. It will not add extra costs except for Shared plan.
If you use Shared App Plan and don't want to increase the extra cost, you could add a virtual directory to your Azure Web App. Then you could publish your second web application to the virtual directory. To create a virtual directory, steps below are for your reference.
Azure portal -> Web App Panel -> Application settings
I recently migrated my app backend from azure mobile services to azure app services. I am using the node.js backend with multiple "easy tables" and "easy api's".
After configuring CORS all of my sites that query this backend are up and running properly.
Unfortunately I have not been able to figure out how to query this backend from localhost. I have tried running sites hosted on my local machine that use the exact same code as working sites hosted elsewhere. I have also tried using postman. All of these attempts result in a 400 bad request error.
Edited o be more clear. I have a migrated azure mobile service running on azure. I am attempting to hit that endpoint from localhost. I have tried to hit this endpoint using postman. I have also tried to hit this endpoint using a locally hosted copy of a website that is currently working when not hosted locally. All requests from localhost end up with a 400 error.
I have added https://localhost, localhost:portnumber, https://myIp to the cors page. On the application settings page my MS_CrossDomainWhitelist setting contains [{"host":"localhost"}] (I have also tried without this setting). I have also tried setting MS_SkipVersionCheck to true. What am I missing?
I've created a web application API with a swagger interface that I've deployed as an API App to Azure.
When creating a Logic App I can find my API App but whenever I try to use it I get the following error:
Failed to fetch swagger. Ensure you have CORS enabled on the endpoint
and are calling an HTTPS endpoint.
I'm using the default https url for the API definition in the API App:
https://microsoft-SOME-LONG-MS-INTERNAL-ID.azurewebsites.net/swagger/docs/v1
The swagger docs have been provided in my C# web API application through Swashbuckle.
For CORS I've set a single * item.
This didn't seem sufficient for the Logic App to access the API App I then configured Authentication / Authorization for the API App to use Azure Active Directory (express), creating an AD Azure App.
I believe the issue will be one of configuring security which is all pretty new to me in Azure. I'd like to make the API App inaccessible externally, but available to Web Apps and Logic Apps within my Azure subscription.
I've not added any authentication mechanism to the ASP.NET web application itself as I figured the web application would effectively be sitting in a private network on Azure. Perhaps this is a bad assumption and I need to add authentication to allow Azure AD to work?
Any pointers / suggestions?
Turns out I needed to update the Azure SDK for Visual Studio. I had an older version that was deploying a preview Api App which resulted in a "Api app host" type being deployed rather that an "API app" type.
Everything works after the update and I've found some documentation for securing the API App and making it available in the Logic App - https://azure.microsoft.com/en-us/documentation/articles/app-service-logic-custom-hosted-api/