How to solve cross domain issue ( CORS ) in Asp.Net web application using IIS URL rewrite module


Sriram Varadarajan
Enterprise Architect
Published On :   18 Feb 2015
Visit Count
Today :  13    Total :   17049



In this article, let us see, How to solve Cross-origin resource sharing (CORS) issue using IIS Re-write module for any .Net Web Application that uses client call to perform advanced requests (POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers) .

To know what is CORS please refer to the below link: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Requirement:  Our requirement was to get data from SAP and bind to our ASP.net web application using Angular JS.

Since we’re accessing 2 different domain here (Localhost.com and SAP.COM) to avoid CORS issue we’re using IIS Re-write to route the request from Asp.net MVC Application to SAP and bind the data back to Asp.net MVC, the example and code mentioned below is used to achieve this requirement

Pre-Requisite to configure IIS Re-write:

1. Install Application Request Routing module to your IIS, you can find the install setup under http://www.iis.net/downloads/microsoft/application-request-routing

2. Download and Install Url Rewrite module – Head over to this link:http://www.iis.net/downloads/microsoft/url-rewrite

To enable IIS Re-write do the following:

  1. Open IIS manager. Double click on Application Request Routing Cache menu in centre pane. If you don’t see it, you’ve not installed it properly. Repeat the above steps or reboot the system, sometimes it helps.
  2. You’ll find Server Proxy Settings on right pane. Open it and check Enable Proxy option.

3. You’ll find URL Rewrite option in root level (computer name) as well as in added website. If you want to configure reverse proxy for all the requests coming to IIS, follow next procedure on root level URL rewrite otherwise do it on per website level(procedure remains same for both). Open URL Rewrite by double clicking on it

4. Create Server Variable HTTP_ACCEPT_ENCODING, it can be created inside URL REWRITE under VIEW SERVER VARIABLE

clip_image001

 

Click ADD inside VIEW SERVER VARIABLE

 clip_image002

Set the default value to TRUE

5. Let’s add inbound rule and outbound rule by copying the below configuration to our web.config

Please place this in your .net application web.config  file

 <system.webServer>
     <rewrite>
         <rules>
             <rule name="Inbound SAP" stopProcessing="true">
                 <match url="sap/(.*)" />
                 <conditions>
                     <add input="{CACHE_URL}" pattern="^(https?)://" />
                 </conditions>
                 <action type="Rewrite" url="http://XXX.XXX.com:8000/{R:0}" />
                 <serverVariables>
                     <set name="HTTP_ACCEPT_ENCODING" value="True" />
                 </serverVariables>
             </rule>
         </rules>
         <outboundRules>
             <rule name="OutBoutd SAP" preCondition="ResponseJSON">
                 <match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link" pattern="http(s)?://XXX.XXX.com:8000/XXX/XXX/XXX/sap(.*)" />
                 <action type="Rewrite" value="http(s)?://XXX.XXX.com:8000″ />
             </rule>
             <preConditions>
                 <preCondition name="ResponseJSON">
                     <add input="{RESPONSE_CONTENT_TYPE}" pattern="^application/json" />
                 </preCondition>
             </preConditions>
         </outboundRules>
     </rewrite>
     <directoryBrowse enabled="true" />
 </system.webServer>

Note:

1. This will automatically create the URL redirection in your IIS website.

Above mentioned steps are to fix the CORS issue permanently but for some reason If you’re required to solve the CORS issue temporarily, please do the following.

IN IE:

GO TO TOOLS- INTERNETOPTIONS-SECURITY-CUSTOMLEVEL

Enable all the three highlighted options

clip_image003

IN CHROME:

1. Create a shortcut of your google CHROME EXE from the installed path

2. Right click go to properties

3. In the target type –disable-web-security

clip_image004

Click OK

Invoke this EXE and this will solve CORS issue temporally

Categories