角度2：交叉原點錯誤

Question

在角度2中，我得到交叉原點錯誤。我運行通過ng項目的發球採用了棱角分明的CLI

沒有能夠解決這個問題，當我在瀏覽器中打開XML文件鏈接它會打開完美的，但是當我試圖訪問相同的服務它給了我錯誤

// 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) => data.json()) 
 
     .catch(this.getError); 
 
    } 
 

 
/* getXML(){ 
 
    return this.http.get('http://www.xmlfiles.com/examples/note.xml') 
 
       .flatMap(res=>{ 
 
         return Observable.fromPromise(this.getJSON(res.text())) 
 
       }) 
 
       .catch((error:any) => 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<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 && 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 < 2 && cdataChild < 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 > 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 && !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<n; i++) 
 
       o[i] = X.toJson(o[i], "", ind+"\t"); 
 
      json += (name?":[":"[") + (o.length > 1 ? ("\n"+ind+"\t"+o.join(",\n"+ind+"\t")+"\n"+ind) : o.join("")) + "]"; 
 
     } 
 
     else if (o == null) 
 
      json += (name&&":") + "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 > 1 ? ("\n"+ind+"\t"+arr.join(",\n"+ind+"\t")+"\n"+ind) : arr.join("")) + "}"; 
 
     } 
 
     else if (typeof(o) == "string") 
 
      json += (name&&":") + "\"" + o.toString() + "\""; 
 
     else 
 
      json += (name&&":") + 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 += "<" + n.nodeName; 
 
        for (var i=0; i<n.attributes.length;i++) 
 
        s += " " + n.attributes[i].nodeName + "=\"" + (n.attributes[i].nodeValue||"").toString() + "\""; 
 
        if (n.firstChild) { 
 
        s += ">"; 
 
        for (var c=n.firstChild; c; c=c.nextSibling) 
 
         s += asXml(c); 
 
        s += "</"+n.nodeName+">"; 
 
        } 
 
        else 
 
        s += "/>"; 
 
       } 
 
       else if (n.nodeType == 3) 
 
        s += n.nodeValue; 
 
       else if (n.nodeType == 4) 
 
        s += "<![CDATA[" + n.nodeValue + "]]>"; 
 
       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() { 
 
    \t var headers = new Headers(); 
 
    \t this.createAuthorizationHeader(headers); 
 
    \t headers.append('Accept', 'application/xml'); 
 

 
    \t return this.http.get('https://angular2.apispark.net/v1/companies/', { 
 
     headers: headers 
 
    }).map(res => JSON.parse(this.xml2json(res.text(),' '))); 
 
    } 
 

 
    private getError(error: Response):Observable<String>{ 
 
     return Observable.throw(error.json() || 'Server Issue'); 
 
    } 
 

 

 
}

//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

Answer 1

介紹給您的問題

的訪問控制允許來源是CORS（跨來源資源共享）機制，讓網絡服務器跨域訪問控制的一部分。它是爲了保護您的應用/網站免受CSRF（跨網站請求僞造）。

流和它是由瀏覽器執行

CORS/CSRF

響應預檢要求未通過訪問控制檢查的問題：沒有「訪問-Control-Allow-Origin'header i出現在請求的資源上。 產地「空」因此不允許訪問。響應有HTTP狀態代碼404

後端（172.21.103.105:15871）是說：你不能從其他領域獲取數據。

要解決這個問題，你必須編輯你的後端Web服務器的配置，讓您的前端應用你在使用作爲後端的Web服務器從你的後端（同一IP不同的端口===不同的域）

查詢數據？如果你提供它，我將編輯我的文章，並遵循以下步驟。但你可以很容易地谷歌。

Answer 2

由於您使用的角度CLI（這是引擎蓋下使用的WebPack），您可以代理您的前端應用到後端。這會「欺騙」（代理，實際上）到後端以認爲您的前端請求來自同一個域。

這個解決方案是好的，如果你正在試圖訪問服務器的URL只允許它是在同一個域的請求，和你的應用程序要在同一個域中運行。

意義 - 如果當你有你的應用程序部署在生產中會在同一個域中您呼叫的服務託管 - 這是一個不錯的辦法。如果該服務是第三方服務，不會與您的應用程序託管在同一個域中，則無論如何，您將從託管應用程序收到CORS錯誤。

您在安裝代理通過創建一個包含類似這樣的代理配置文件：

​​

然後用NPM腳本爲你的應用程序是這樣的：

"start": "ng serve --proxy-config _your_proxy_config_.json" 

看一看文檔HERE