Handling CORS in Angular UI

To ensure that your application doesn't get the CORS error for Angular UI, you will have to follow the below procedures to setup proxy settings in IIS (Internet Information Services) or Express Node server:

📘

For example:

Angular Site hosted server - https://testuatsite1.in

Few API Requests landing to this server to be rewritten and
routed to https://testuatsite2.in

Sample -
https://testuatsite1.in/testv2/<rest_of_the_path> will be rewritten and routed internally to https://testuatsite2.in/testv2/<rest_of_the_path>

Sample Config File (for IIS Server)

• Application Request Routing Module needs to be installed in IIS
• URL Rewrite Module to be installed in IIS
• Reverse proxy needs to be enabled

Sample Config file in XML formal

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="TestApiProxyRule1" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="testV2/(.*)" />
          <action type="Rewrite" url="https://testuatsite2.in/testV2/{R:1}" /> 
        </rule>
        <rule name="TestApiProxyRule2" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="testV3/(.*)" />
          <action type="Rewrite" url="https://testuatsite2.in/testV3/{R:1}" />
        </rule>
        <rule name="TestApiProxyRule3" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="testV4/(.*)" />
          <action type="Rewrite" url="https://testuatsite2.in/testV4/{R:1}" />
        </rule>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Sample Config File (for Express Node Server)

Code Snippet for handling CORS in default.config file in nginx server.

default.config file

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

"serve": 
				{
         "builder": "@angular-devkit/build-angular:dev-server",
         "options": 
         					{
                   "browserTarget": "",
                   "proxyConfig": "proxy.config.json"
                    },
                },

The following changes need to be done in proxy.json file

JSON

"/circles/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },
      
"/operator-circle-info/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },

"/pack-type/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },

"/plans/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },

"/recharge-transactions/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },

"/transaction-enquiry/*": {
        "target": "https://uatapis.paynearby.in",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    }
}

Text