title: Angular 2 : Cross origin error
body: <p>In angular 2 i get cross origin error. i am running project through ng serve using angular cli</p>
  
  <p>not able to solve this issue as when i open XML file link in browser it opens perfectly but when i try to access the same in service it gives me error</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// data service file
  
  import { Injectable } from '@angular/core';
  import { Http, Response, Headers } from '@angular/http';
  import { Observable } from 'rxjs';
  import 'rxjs/operator/map';
  import 'rxjs/operator/catch';
  import 'rxjs/observable/throw';
  import { xml2js } from 'xml2js';
  
  @Injectable()
  export class DataService {
  //parser = new xml2js.Parser({explicitArray : false});
    constructor(private http: Http) { }
  
    getLoginData(){
      return this.http.get('https://api.myjson.com/bins/zsjzj')
        .map((data:Response) =&gt; data.json())
        .catch(this.getError);
    } 
  
   /* getXML(){
      return this.http.get('http://www.xmlfiles.com/examples/note.xml')
                  .flatMap(res=&gt;{
                          return Observable.fromPromise(this.getJSON(res.text()))
                  })
                  .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server error'));
    }*/
  createAuthorizationHeader(headers:Headers) {
      headers.append('Authorization', 'Basic ' +
        btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be7-9655-7ef7d7bf9d20')); 
    }
  
    xml2json(xml, tab) {
     var X = {
        toObj: function(xml) {
           var o = {};
           if (xml.nodeType==1) {   // element node ..
              if (xml.attributes.length)   // element with attributes  ..
                 for (var i=0; i&lt;xml.attributes.length; i++)
                    o["@"+xml.attributes[i].nodeName] = (xml.attributes[i].nodeValue||"").toString();
              if (xml.firstChild) { // element has child nodes ..
                 var textChild=0, cdataChild=0, hasElementChild=false;
                 for (var n=xml.firstChild; n; n=n.nextSibling) {
                    if (n.nodeType==1) hasElementChild = true;
                    else if (n.nodeType==3 &amp;&amp; n.nodeValue.match(/[^ \f\n\r\t\v]/)) textChild++; // non-whitespace text
                    else if (n.nodeType==4) cdataChild++; // cdata section node
                 }
                 if (hasElementChild) {
                    if (textChild &lt; 2 &amp;&amp; cdataChild &lt; 2) { // structured element with evtl. a single text or/and cdata node ..
                       X.removeWhite(xml);
                       for (var n=xml.firstChild; n; n=n.nextSibling) {
                          if (n.nodeType == 3)  // text node
                             o["#text"] = X.escape(n.nodeValue);
                          else if (n.nodeType == 4)  // cdata node
                             o["#cdata"] = X.escape(n.nodeValue);
                          else if (o[n.nodeName]) {  // multiple occurence of element ..
                             if (o[n.nodeName] instanceof Array)
                                o[n.nodeName][o[n.nodeName].length] = X.toObj(n);
                             else
                                o[n.nodeName] = [o[n.nodeName], X.toObj(n)];
                          }
                          else  // first occurence of element..
                             o[n.nodeName] = X.toObj(n);
                       }
                    }
                    else { // mixed content
                       if (!xml.attributes.length)
                          o = X.escape(X.innerXml(xml));
                       else
                          o["#text"] = X.escape(X.innerXml(xml));
                    }
                 }
                 else if (textChild) { // pure text
                    if (!xml.attributes.length)
                       o = X.escape(X.innerXml(xml));
                    else
                       o["#text"] = X.escape(X.innerXml(xml));
                 }
                 else if (cdataChild) { // cdata
                    if (cdataChild &gt; 1)
                       o = X.escape(X.innerXml(xml));
                    else
                       for (var n=xml.firstChild; n; n=n.nextSibling)
                          o["#cdata"] = X.escape(n.nodeValue);
                 }
              }
              if (!xml.attributes.length &amp;&amp; !xml.firstChild) o = null;
           }
           else if (xml.nodeType==9) { // document.node
              o = X.toObj(xml.documentElement);
           }
           else
              alert("unhandled node type: " + xml.nodeType);
           return o;
        },
        toJson: function(o, name, ind) {
           var json = name ? ("\""+name+"\"") : "";
           if (o instanceof Array) {
              for (var i=0,n=o.length; i&lt;n; i++)
                 o[i] = X.toJson(o[i], "", ind+"\t");
              json += (name?":[":"[") + (o.length &gt; 1 ? ("\n"+ind+"\t"+o.join(",\n"+ind+"\t")+"\n"+ind) : o.join("")) + "]";
           }
           else if (o == null)
              json += (name&amp;&amp;":") + "null";
           else if (typeof(o) == "object") {
              var arr = [];
              for (var m in o)
                 arr[arr.length] = X.toJson(o[m], m, ind+"\t");
              json += (name?":{":"{") + (arr.length &gt; 1 ? ("\n"+ind+"\t"+arr.join(",\n"+ind+"\t")+"\n"+ind) : arr.join("")) + "}";
           }
           else if (typeof(o) == "string")
              json += (name&amp;&amp;":") + "\"" + o.toString() + "\"";
           else
              json += (name&amp;&amp;":") + o.toString();
           return json;
        },
        innerXml: function(node) {
           var s = ""
           if ("innerHTML" in node)
              s = node.innerHTML;
           else {
              var asXml = function(n) {
                 var s = "";
                 if (n.nodeType == 1) {
                    s += "&lt;" + n.nodeName;
                    for (var i=0; i&lt;n.attributes.length;i++)
                       s += " " + n.attributes[i].nodeName + "=\"" + (n.attributes[i].nodeValue||"").toString() + "\"";
                    if (n.firstChild) {
                       s += "&gt;";
                       for (var c=n.firstChild; c; c=c.nextSibling)
                          s += asXml(c);
                       s += "&lt;/"+n.nodeName+"&gt;";
                    }
                    else
                       s += "/&gt;";
                 }
                 else if (n.nodeType == 3)
                    s += n.nodeValue;
                 else if (n.nodeType == 4)
                    s += "&lt;![CDATA[" + n.nodeValue + "]]&gt;";
                 return s;
              };
              for (var c=node.firstChild; c; c=c.nextSibling)
                 s += asXml(c);
           }
           return s;
        },
        escape: function(txt) {
           return txt.replace(/[\\]/g, "\\\\")
                     .replace(/[\"]/g, '\\"')
                     .replace(/[\n]/g, '\\n')
                     .replace(/[\r]/g, '\\r');
        },
        removeWhite: function(e) {
           e.normalize();
           for (var n = e.firstChild; n; ) {
              if (n.nodeType == 3) {  // text node
                 if (!n.nodeValue.match(/[^ \f\n\r\t\v]/)) { // pure whitespace text node
                    var nxt = n.nextSibling;
                    e.removeChild(n);
                    n = nxt;
                 }
                 else
                    n = n.nextSibling;
              }
              else if (n.nodeType == 1) {  // element node
                 X.removeWhite(n);
                 n = n.nextSibling;
              }
              else                      // any other node
                 n = n.nextSibling;
           }
           return e;
        }
     };
     if (xml.nodeType == 9) // document node
        xml = xml.documentElement;
     var json = X.toJson(X.toObj(X.removeWhite(xml)), xml.nodeName, "\t");
     return "{\n" + tab + (tab ? json.replace(/\t/g, tab) : json.replace(/\t|\n/g, "")) + "\n}";
  }
  
  getCompanies() {
     var headers = new Headers();
     this.createAuthorizationHeader(headers);
     headers.append('Accept', 'application/xml');
  
     return this.http.get('https://angular2.apispark.net/v1/companies/', {
        headers: headers
      }).map(res =&gt; JSON.parse(this.xml2json(res.text(),'  ')));
    }
  
    private getError(error: Response):Observable&lt;String&gt;{
        return Observable.throw(error.json() || 'Server Issue');
    }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//error
  
  OPTIONS http://172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=2053590089 404 (Not Found)
  :4200/login:1 XMLHttpRequest cannot load http://172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=2053590089. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.
  core.es5.js:1085 ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}
  defaultErrorLogger @ core.es5.js:1085
  ErrorHandler.handleError @ core.es5.js:1145
  next @ core.es5.js:4774
  schedulerFn @ core.es5.js:3848
  SafeSubscriber.__tryOrUnsub @ Subscriber.js:234
  SafeSubscriber.next @ Subscriber.js:183
  Subscriber._next @ Subscriber.js:125
  Subscriber.next @ Subscriber.js:89
  Subject.next @ Subject.js:55
  EventEmitter.emit @ core.es5.js:3834
  NgZone.triggerError @ core.es5.js:4205
  onHandleError @ core.es5.js:4166
  webpackJsonp.579.ZoneDelegate.handleError @ zone.js:369
  webpackJsonp.579.Zone.runTask @ zone.js:168
  ZoneTask.invoke @ zone.js:460</code></pre>
  </div>
  </div>
  </p>