title: Angular CORS request blocked
body: <p>I am trying to connect my Angular app with a simple REST server on express. The server only sends <code>json</code> data in reply to request. To add <code>CORS</code> support, I used the <code>cors</code> module from npm. On the Angular app, I added <code>HttpHeaders</code> following the instructions from this question: <a href="https://stackoverflow.com/questions/42352854/how-i-add-headers-to-http-get-or-http-post-in-typescript-and-angular-2?rq=1">Angular CORS request blocked</a>. </p>
  
  <p>Here is my code in express where I set up the cors Options:
  `</p>
  
  <pre><code>// async CORS setup delegation
  function corsOptsDelegator(req, cb) {
      let opts = {},
          origin = req.header('Origin');
      if(imports.allowedOrigins.indexOf(origin) === 1) opts.origin = true;
      else opts.origin = false;
      opts.optionsSuccessStatus = 200;
      opts.methods = ['POST', 'GET']; // allowed methods
      opts.credentials = true; // for passing/setting cookie 
      opts.allowedHeaders = ['Content-Type', 'Accept', 'Access-Control-Allow-Origin']; // restrict headers 
      opts.exposedHeaders = ['Accept', 'Content-Type']; // for exposing custom headers to clients; use for hash
      cb(null, opts);
  }
  `
  </code></pre>
  
  <p>Here's how I added it to the global <code>get</code> handler:</p>
  
  <pre><code>`
  app.get('/', cors(corsOptsDelegator), (res, req, nxt) =&gt; {
      // only for adding cors on all requests
      nxt();
  });
  `
  </code></pre>
  
  <p>Here's how I set up the Angular service:</p>
  
  <p>`</p>
  
  <pre><code>export class ContentGetterService {
  
    private root: string;
    private corsHeaders: HttpHeaders;
    //private contents: string;
  
    constructor(private http: HttpClient) {
      this.root = 'http://localhost:8888';
      this.corsHeaders = new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': 'http://localhost:4200'
      });
      //this.contents = '';
     }
  
    getContent(subs: Array&lt;string&gt;): Observable&lt;IContent&gt; {
      return (() =&gt; {
        return this.http.get&lt;IContent&gt;( (() =&gt; {
          let r = this.root;
          subs.forEach((s, i, a) =&gt; {
            if(i === a.length-1) {
              r += s;
            }
            else {
              if(s !== '/') {
                r += s;
              }
            }
          });
          return r;
        })(), {
          headers: this.corsHeaders
        });
  
      })();
    }
    }
  </code></pre>
  
  <p>Browser Warning: <code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</code></p>
  
  <p>Thanks.</p>