Enable CORS (4), In IIS 10

This article is a continuation of the previous article series, Enable CORS in .NET Core Web API (1), (2), and (3), when we tested the CORS in Web API, we used IIS as server, and then got the way to configure IIS 10 to be CORS enabled.
 

Introduction

 
To make IIS 10 CORS enabled, we must do these two things,

Install CORS module in IIS 10

 
The Microsoft IIS CORS Module is an extension that enables web sites to support the CORS (Cross-Origin Resource Sharing) protocol.
 
The IIS CORS module helps with setting appropriate response headers and responding to preflight requests. Once installed, the IIS CORS module is configured via a site or application web.config and has its own cors configuration section within system.webserver.
 

Configure IIS 10 to be CORS enabled

 
Open IIS, we make a new virtual directory under the default web site,
  •  Right click Defatult Web Site > Add Virtual Directory;
  • In Add Virtual Directory dialog box, Name Alias as CORS_Enable;
  • Choose a Physical path: sya, C:\inetpub\wwwroot
  • Click OK
 
We have,
 
We make the virtual directory CORS enabled, just add a web.config file with the content copied from IIS CORS module Configuration Reference,
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <configuration>  
  3.     <system.webServer>  
  4.         <cors enabled="true" failUnlistedOrigins="true">  
  5.             <add origin="*" />  
  6.             <add origin="https://*.microsoft.com"  
  7.                  allowCredentials="true"  
  8.                  maxAge="120">   
  9.                 <allowHeaders allowAllRequestedHeaders="true">  
  10.                     <add header="header1" />  
  11.                     <add header="header2" />  
  12.                 </allowHeaders>  
  13.                 <allowMethods>  
  14.                      <add method="DELETE" />  
  15.                 </allowMethods>  
  16.                 <exposeHeaders>  
  17.                     <add header="header1" />  
  18.                     <add header="header2" />  
  19.                 </exposeHeaders>  
  20.             </add>  
  21.             <add origin="http://*" allowed="false" />  
  22.         </cors>  
  23.     </system.webServer>  
  24. </configuration> 
We will see the difference between the Default Web Site and its sub site, CORS_Enable.
 

Test the CORS effect

 
We use the Angular client developed in Part II, in the file src/app/app.component.ts
  1. import { Component, OnInit, ViewChild } from '@angular/core';    
  2. import { HttpClient } from '@angular/common/http'// remote    
  3.     
  4. import { AgGridAngular } from 'ag-grid-angular';    
  5. import 'ag-grid-enterprise';    
  6.     
  7. @Component({    
  8.     selector: 'app-root',    
  9.     templateUrl: './app.component.html',    
  10.     styleUrls: ['./app.component.scss']    
  11. })    
  12. export class AppComponent {    
  13.     @ViewChild('agGrid') agGrid: AgGridAngular;    
  14.     title = 'ag-Grid';    
  15.     
  16.     columnDefs = [    
  17.       { field: 'make', sortable: true, filter: true },    
  18.       { field: 'model', sortable: true, filter: true },    
  19.       { field: 'price', sortable: true, filter: true }    
  20.   ];    
  21.     
  22.   rowData: any;    
  23.     
  24.   constructor(private http: HttpClient) {    
  25.     
  26.   }    
  27.     
  28.   ngOnInit() {         
  29.       this.rowData = this.http.get('https://www.ag-grid.com/example-assets/row-data.json');      
  30.   }    
  31.     
  32.   getSelectedRows() {    
  33.     const selectedNodes = this.agGrid.api.getSelectedNodes();    
  34.     const selectedData = selectedNodes.map(node => {    
  35.     
  36.       return node.data;    
  37.     });    
  38.     const selectedDataStringPresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');    
  39.     
  40.     alert(`Selected nodes: ${selectedDataStringPresentation}`);    
  41.   }    
  42. }  
We download the small size data from server: https://www.ag-grid.com/example-assets/small-row-data.json,
  1. [  
  2.     { "make""Toyota""model""Celica""price": 35000 },  
  3.     { "make""Ford""model""Mondeo""price": 32000 },  
  4.     { "make""Porsche""model""Boxter""price": 72000 }  

and save it as small-row-data.json in both Default Web Site C:\inetpub\wwwroot\small-row=data.json; and sub site  C:\inetpub\wwwroot\CORS_Enable\small-row-data.json, now we run the Angular by targetting to these two sites,
 
Not CORS enabled site,
  1. // this.rowData = this.http.get('https://www.ag-grid.com/example-assets/row-data.json');
  2. this.rowData = this.http.get('http://localhost/small-row-data.json');  
Result
 
 
CORS enabled site,
  1. // this.rowData = this.http.get('https://www.ag-grid.com/example-assets/row-data.json');    
  2. this.rowData = this.http.get('http://localhost/CORS_Enable/small-row-data.json');  
Result
 
 

Summary

 
IIS is not CORS enabled by defualt. After installing CORS Module , and configure IIS by IIS CORS module Configuration Reference, we can make IIS CORS enabled.