2017-04-25 74 views
0

在角度2中,我得到交叉原点错误。我运行通过ng项目的发球采用了棱角分明的CLI角度2:交叉原点错误

没有能够解决这个问题,当我在浏览器中打开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

+0

这是**最有可能不是**前端错误。交叉错误始终是后端问题(不使用正确的头文件)或两者的组合(例如,从'localhost'而不是'127.0.0.1'访问'127.0.0.1')。它也可能是一个不好的路线,如果你访问禁止区域,错误的端口或打字错误,一些服务器会给CORS错误,但这很可能是后端问题。 – Randy

+0

错误信息包含'Origin'null'因此不允许访问'。这听起来像是一个内部错误,通常这就是你的IP地址。 – Randy

回答

1

介绍给您的问题

访问控制允许来源CORS(跨来源资源共享)机制,让网络服务器跨域访问控制的一部分。它是为了保护您的应用/网站免受CSRF(跨网站请求伪造)。

流和它是由浏览器执行

CORS/CSRF

响应预检要求未通过访问控制检查的问题:没有“访问-Control-Allow-Origin'header i出现在请求的资源上。 产地“空”因此不允许访问。响应有HTTP状态代码404

后端(172.21.103.105:15871)是说:你不能从其他领域获取数据。

要解决这个问题,你必须编辑你的后端Web服务器的配置,让您的前端应用你在使用作为后端的Web服务器从你的后端(同一IP不同的端口===不同的域)

查询数据?如果你提供它,我将编辑我的文章,并遵循以下步骤。但你可以很容易地谷歌。

+0

我在angular-cli上运行项目 – Jay

+0

它与你的角度应用程序无关......角度询问你的后端信息(172.21.103.105:15871)。和你的后端说不。你能告诉我们这是什么172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=2053590089 – VikingCode

+0

我想这是从我的公司方面的障碍 – Jay

1

由于您使用的角度CLI(这是引擎盖下使用的WebPack),您可以代理您的前端应用到后端。这会“欺骗”(代理,实际上)到后端以认为您的前端请求来自同一个域。

这个解决方案是好的,如果你正在试图访问服务器的URL只允许它是在同一个域的请求,和你的应用程序要在同一个域中运行。

意义 - 如果当你有你的应用程序部署在生产中会在同一个域中您呼叫的服务托管 - 这是一个不错的办法。如果该服务是第三方服务,不会与您的应用程序托管在同一个域中,则无论如何,您将从托管应用程序收到CORS错误。

您在安装代理通过创建一个包含类似这样的代理配置文件:

​​

然后用NPM脚本为你的应用程序是这样的:

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

看一看文档HERE

+0

我的错误为172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=18446744073498507546:1选项http://172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=18446744073498507546 404(未找到) 登录:1 XMLHttpRequest无法加载http://172.21.103.105:15871/cgi-bin/blockpage.cgi?ws-session=18446744073498507546。对预检请求的响应不会通过访问控制检查:请求的资源上不存在“访问控制 - 允许来源”标头。因此不允许原产地'null'访问。该响应具有HTTP状态代码404. – Jay

+0

嗯,你能告诉我们为什么**“tricking”**是一个很好的解决方案吗?我的意思是**某些网址的优点是**,而不是按照它想要配置的方式解决问题。 – VikingCode

+0

@VikingCode欺骗真的是一个糟糕的词。如果服务器只允许来自同一个域的访问,这是一个很好的解决方案。而当你在本地主机上开发时,你可以看起来你是来自同一个域,所以请求会通过。如果它是一个完全不同的服务器,不受你的控制,那么它不是最好的解决方案,因为它不适用于生产。 –