title: CORS Error: “requests are only supported for protocol schemes: http…” etc
body: <p>I am trying to run a simple application. I have an Express backend which returns a JSON string when visited at <code>localhost:4201/ticker</code>. When I run the server and make a request to this link from my Angular Service over <code>http</code>, I get the following error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load localhost:4201/ticker. Cross origin
    requests are only supported for protocol schemes: http, data, chrome,
    chrome-extension, https.</p>
  </blockquote>
  
  <p>I read the following article: <a href="http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/" rel="noreferrer">Understanding and Using CORS</a> and as stated, used the <code>cors</code> module with my express server. However, I am still getting the error as given above. Part of code is given below:</p>
  
  <p>Server code:</p>
  
  <pre><code>private constructor(baseUrl: string, port: number) {
      this._baseUrl = baseUrl;
      this._port = port;
      this._express = Express();
      this._express.use(Cors());
      this._handlers = {};
      this._hInstance = new Handlers();
      this.initHandlers();
      this.initExpress();
  }
  private initHandlers(): void {
      // define all the routes here and map to handlers
      this._handlers['ticker'] = this._hInstance.ticker;
  }
  private initExpress(): void {
      Object.keys(this._handlers)
          .forEach((key) =&gt; {
              this._express.route(this._url(key))
                  .get(this._handlers[key]);
          });
  }
  private _url(k: string): string {
      return '/' + k;
  }
  </code></pre>
  
  <p>Here is the handler function:</p>
  
  <pre><code>ticker(req: Request, res: Response): void {
      Handlers._poloniex
          .getTicker()
          .then((d) =&gt; {
              return Filters.tickerFilter(d, Handlers._poloniex.getBases());
          })
          .then((fdata) =&gt; {
  
              //res.header('Access-Control-Allow-Origin', "*");
              //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
              res.header('Content-Type', 'application/json');
              res.send(JSON.stringify(fdata));
          })
          .catch((err) =&gt; {
             this._logger.log([
                  'Error: ' + err.toString(),
                  'File: ' + 'handlers.class.ts',
                  'Method: ' + 'ticker'
              ], true);
          });   
  }
  </code></pre>
  
  <p>Here is my Angular Service:</p>
  
  <pre><code>export class LiveTickerService {
  
    private _baseUrl: string;
    private _endpoints: {[key:string]: string};
  
    constructor(
      private _http: Http
    ) {
      this._baseUrl = 'localhost:4201/';
       this._endpoints = {
         'ticker': 'ticker'
       };
     }
  
    getTickerData(): Observable&lt;Response&gt; {
      return this._http.get(this._baseUrl + this._endpoints['ticker'])
        .map(resp =&gt; resp.json())
    }
  
  }
  </code></pre>
  
  <p>Here is how I am using my Service:</p>
  
  <pre><code>getTicker() {
    let a = new Array&lt;{[key: string]: any}&gt;();
    this._tickerService.getTickerData()
       .subscribe(
          data =&gt; {
            let parsed = JSON.parse(JSON.stringify(data));
            Object.keys(parsed)
              .forEach((k) =&gt; {
                a.push({k: parsed[k]});
              });
           this.data = a;
          },
          error =&gt; console.log(error.toString()),
          () =&gt; console.log('Finished fetching ticker data')
        );
    return this.data;
  }
  </code></pre>