title: Express Gateway (key-auth enabled) giving CORs issue when called from front-end application
body: <p><strong>Issue with description</strong></p>
  
  <p>I have my front end application developed and deployed using Angular and nginx respectively.</p>
  
  <p>Resource server is developed using No stress NodeJS.</p>
  
  <p>Flow is </p>
  
  <pre><code>UI -&gt; express gateway -&gt; resource server
  </code></pre>
  
  <p>Whenever trying to call an <strong>API from UI</strong>, with <strong><em>key-auth enabled</em></strong> in express gateway, getting error</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at '<a href="http://ip:port/api/function_name" rel="nofollow noreferrer">http://ip:port/api/function_name</a>' from origin '<a href="http://url" rel="nofollow noreferrer">http://url</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  </blockquote>
  
  <pre><code>Same API when called from Postman works though. It also works if I remove 'key-auth' from gateway. 
  </code></pre>
  
  <p>Sharing the code changes done at various levels:</p>
  
  <p><strong>Code - <em>Express Gateway</em></strong></p>
  
  <pre class="lang-yaml prettyprint-override"><code>example:
      apiEndpoints:
        - example
      policies:
        - cors:
            - action:
                origin: ["*"]
                methods: "HEAD,GET,PUT,PATCH,POST,DELETE,OPTIONS"
                preflightContinue: true
                optionsSuccessStatus: 204
                maxAge: 600
                allowedHeaders:
                  [
                    "Origin, X-Requested-With, Content-Type, Accept, Authorization",
                  ]
        - key-auth:
            - condition:
                name: not
                condition:
                    name: method
                    methods:
                      - OPTIONS
        - proxy:
            - action:
                serviceEndpoint: exampleService
                proxyTimeout: 0
  
  </code></pre>
  
  <p><strong>Code - <em>Angular</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'Application/json; charset=UTF-8',
          'Authorization': "Bearer " + apiKey,
          'Access-Control-Allow-Origin': '*'
      }),
  };
  </code></pre>
  
  <p><strong>Code - <em>Resource Server - routes.js</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default function routes(app) {
     app.use(cors());
     // Also tried setting res.setHeader explicitly, but no success.
  }
  </code></pre>
  
  <p><strong>Code - <em>nginx level</em></strong></p>
  
  <pre class="lang-sh prettyprint-override"><code>server(){
     ...
     location / {
          # Simple Requests
          if ($request_method ~* "(GET|POST)") {
               add_header "Access-Control-Allow-Origin"  *;
          }
  
          # Preflighted requests
          if ($request_method = OPTIONS ) {
               add_header "Access-Control-Allow-Origin"  *;
               add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
               add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
               return 200;
          }
  
          # First attempt to serve request as file, then
          # as directory, then fall back to displaying a 404.
          try_files $uri $uri/ =404;
     }
  }
  </code></pre>
  
  <p>I have gone through various links on this issue, tried multiple things as shown above but couldn't find any solution, thus raising new one. </p>
  
  <p>How to remove this CORs error?</p>