Some time ago, I worked on an issue, where a website needed to execute a CORS (Cross Domain Request) to a second website which was protected by Windows Integrated authentication. Since the setup does have a few hidden caveats, and is detailed only in part in various forum posts, I will like to give a detailed walk through of how such a setup would have to be configured.
Through this tutorial, we will look at:
The configuration of IIS for this scenario to work is the trickiest bit since it relies on some subtleties that I have not been able to find very much documentation on – hence this article series.
For the rest of the article, I will be looking at explaining what the end result should look like and how the flow of control should be between components.
The initial diagram – CORS tutorial
The Razor Pages website sits behind an IIS webserver that is configured to listen to requests with a host header of CoreRazor. The WebAPI site sits behind an IIS server that is configured to listen for traffic with a host header of CoreWebApi.
Both these sites are using Windows Integrated Authentication to authenticate incoming requests and make sure only authorized users can access the content.
The front-end website (ASP.net Core Razor Pages) looks like the below:
When executed, the AsyncPoster Razor Page, will print out the date and time it was created on, using the server’s time, since this piece of the code has run inside the dotnet.exe process running on the server called CoreRazor.
It also displays a text area control that allows a user to input some text, and then send the text to a backend HTTP service, implemented as a WebAPI controller in ASP.net Core 2. This is done by pressing the ‘Echo Text’ button that will trigger some JQuery script to create a POST request to the CoreWebAPI server and send a JSON object along, containing the text entered in the text area.
Once the request reaches the CoreWebAPI site, it will be processed by the POST method of a WebAPI controller called EchoText. All this controller will do, is that it will capture the text that has been sent in, add the ‘Echo back:‘ prefix and send the text back to the page as a JSON object.
On the page, the JQuery script that has executed the POST request will capture the response from the WebAPI controller and display the text that has been returned inside a div element on the page. It will also clear the text area so the user can type in more text.
Here is what the page looks like when some text has been entered, sent for processing and displayed back:
Proceed to the next article in the series >
Written by: Paul Cociuba
Reviewed by: Muna AlHasan