IntelliJ Statisches Webprojekt zu Tomcat oder Angular CORs

Question

Ich habe ein statisches Web-eckiges Projekt in IntelliJ IDEA. Die statische Seite wird auf http://localhost:63342/Calculator/app/index.html bereitgestellt. Ich habe auf ein Problem stoßen, wo ich versuche, einige Daten an einen Server senden eine Antwort zurück zu bekommen, aber wenn ich versuche ich diesen Fehler zu schreiben bekommen:

XMLHttpRequest cannot load <url>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 401. 

Hier ist mein Beitrag Winkel Code:

WebIdServer.prototype.getId = function(id) { 
    var _this = this; 
    var request = { 
     method: 'POST', 
     url: 'https://<url>, 
     headers: { 
      'Authorization':'Bearer QWE234J234JNSDFMNNKWENSN2M3', 
      'Content-Type':'application/json', 
     }, 
     data: { 
      id:id 
     } 
    }; 
    _this.$log.debug(request); 
    return _this.$http(request) 
     .success(function(data, status, headers, config){ 
      _this.$log.debug("Successfull request."); 
      /*called for result & error because 200 status*/ 
      _this.uid = data.id; 
      _this.$log.debug(_this.uid); 
     }) 
     .error(function(data, status, headers, config){ 
      _this.$log.debug("Something went wrong with the request."); 
      _this.$log.debug(data); 
      /*handle non 200 statuses*/ 
     }); 
}; 

Ich weiß für eine Tatsache, dass Post funktioniert, weil ich es auf einer lokalen URL meiner Anwendung ausprobiert habe, die ich auf einem anderen Port ausgeführt hatte.

Also meine Frage ist, da ich nicht von localhost posten kann, habe ich mich gefragt, ob vielleicht Bereitstellung dieses zu einem Tomcat-Server Dinge beheben würde. Wenn ja, wie stellen Sie dieses statische Webprojekt auf einem Tomcat-Server bereit? Wenn das nicht notwendig ist, wie komme ich dann zu diesem Problem, das ich habe?

Answer 1

Es gibt ein paar Dinge in Bezug auf CORS. Es ist ein Webbrowser, der Ihnen sagt, dass Sie keinen bestimmten Anruf tätigen können. Dies ist nur ein Front-End-Problem, ein Skript, das auf einem Server ausgeführt wird, kann unabhängig vom Standort eine API aufrufen. Drei verschiedene Optionen:

ohne Konfig; gleiche Hosts

Ohne Konfiguration auf Ihrem Server müssen die AJAX-Anforderungen Ihres Frontends sowohl der Domäne als auch dem Port des von Ihnen angerufenen Dienstes entsprechen. In deinem Fall sollte deine eckige App unter http://localhost:63342 einen Dienst anrufen, der auch auf http://localhost:63342 gehostet wird, und dann bist du süß. Keine CORS-Probleme.

mit Serverseite Config; verschiedene Hosts

Wenn die API an anderer Stelle gehostet wird, müssen Sie den API-Host konfigurieren. Bei den meisten Servern können Sie Zugriffssteuerungen konfigurieren, damit eine bestimmte Domäne den CORS-Block umgehen kann. Wenn Sie Zugriff auf den Server haben, den Sie anrufen möchten, prüfen Sie, ob Sie ihn einrichten können. Die enable CORS Website enthält Beispiele für die meisten Server. Normalerweise ist das ziemlich einfach.

einen Proxy erstellen

Das ist Ihre Tomcat Idee. CORS ist nur ein Problem, wenn Ihr Frontend einen anderen Dienst anruft. Ein Server-Skript kann alles aufrufen, was es will. So könnten Sie Tomcat (oder Apache oder NGINX oder NodeJS ...) verwenden, um ein Skript zu hosten, das die Anfrage weitergibt. Im Wesentlichen müssen Sie lediglich zur Antwort der API hinzufügen.

Ich habe noch nie Tomcat selbst benutzt, aber hier ist eine blog post, die einige nützliche Informationen dazu haben könnte. Kombinieren Sie es mit der Info auf enable CORS und Sie sollten in der Lage sein, alles zu irgendwohin zu leiten.

Dieser Prozess ist üblich. Betrachten Sie einfach die Popularität eines Knotenpakets wie CORS anywhere, was Ihr Tomcat tut.

Wie gut eine Idee ist, hängt davon ab, wie Sie die Anmeldeinformationen und Tokens weitergeben können. Sie möchten nicht wirklich einen Dienst erstellen, der blind die API einer anderen Person mit Ihren Anmeldeinformationen aufrufen wird.