Configure URL Rewrite using server variable to support multiple origins - url-rewriting

Question

I was dealing with CORS issue a couple days ago where I need to support multiple origins. I did some research and found a couple posts pointing me to this great tool (URL Rewrite). I got the solution I wanted following Paco Zarate tip here: Access-control-allow-origin with multiple domains using URL Rewrite. I also found another post here: http://www.carlosag.net/articles/enable-cors-access-control-allow-origin.cshtml showing me how to achieve the same solution with a different method of configuration within URL Rewrite.
Paco Zarate solution works like a charm. Why am I still asking question? It's just for learning purposes. And also I think the second post configuration yields a more elegant list of origins/domains I want to white-listed. For ease of maintainability I can just go to the Rewrite Maps and see all of my AllowedOrigins.
When attempted the second post's solution, I got this message: ERR_CONNECTION_RESET under Console tab of the browser debugger tool. And the request header under Network tab says "Provisional headers are shown"
Many thanks in advance.
My config file:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpErrors errorMode="Detailed" />
<urlCompression doStaticCompression="true" doDynamicCompression="true" />
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Headers" value="Origin, Content-Type, Accept" />
<add name="Access-Control-Request-Method" value="POST" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Allow-Origin" value="http://localhost:8080" />
</customHeaders>
</httpProtocol>
<rewrite>
<rules>
<rule name="Capture Origin Header">
<match url=".*" />
<conditions>
<add input="{HTTP_ORIGIN}" pattern=".+" />
</conditions>
<serverVariables>
<set name="CAPTURED_ORIGIN" value="{C:0}" />
</serverVariables>
<action type="None" />
</rule>
<rule name="Preflight Options" enabled="false" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{REQUEST_METHOD}" pattern="^OPTIONS$" />
</conditions>
<action type="CustomResponse" statusCode="200" statusReason="Preflight" statusDescription="Preflight" />
</rule>
</rules>
<rewriteMaps>
<rewriteMap name="AllowedOrigins">
<add key="http://somedomain:8080" value="http://localhost:8080" />
</rewriteMap>
</rewriteMaps>
<outboundRules>
<rule name="Set-Access-Control-Allow-Origin for known origins">
<match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".+" negate="true" />
<conditions>
<add input="{AllowedOrigins:{CAPTURED_ORIGIN}}" pattern=".+" />
</conditions>
<action type="Rewrite" value="{C:0}" />
</rule>
</outboundRules>
</rewrite>
<tracing>
<traceFailedRequests>
<add path="*">
<traceAreas>
<add provider="WWW Server" areas="Rewrite" verbosity="Verbose" />
</traceAreas>
<failureDefinitions timeTaken="00:00:00" statusCodes="500" verbosity="Error" />
</add>
</traceFailedRequests>
</tracing>
</system.webServer>

Answer 1

I had a lot of issues trying to use URL Rewrite module to enable CORS, after a lot of troubleshooting I found that for IIS 7.5+ you can use IIS CORS Module: https://www.iis.net/downloads/microsoft/iis-cors-module
Your web.config should be something like this:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<cors enabled="true" failUnlistedOrigins="true">
<add origin="http://localhost:8080" allowCredentials="true">
<allowMethods>
<add method="POST" />
</allowMethods>
</add>
</cors>
</system.webServer>
</configuration>
You can find the configuration reference in here: https://learn.microsoft.com/en-us/iis/extensions/cors-module/cors-module-configuration-reference