2016-12-05 3 views
1

Ich lerne, React im Moment zu verwenden, und ich habe ein Problem: Ich möchte reagieren, um mit meinem Java Spring Boot Backend (Tomcat) zu arbeiten. React läuft auf Port 3000 (Standard) und mein Tomcat-Server auf Port 8080 (Standard). Nun, wenn ich einen REST-Anruf zu tätigen, bekomme ich folgende FehlerIch kann Ruhe nicht Anrufe mit reagieren

script.js:13 GET http://localhost:8080/api/path?p=test net::ERR_CONNECTION_REFUSED 

Mein Rest Aufruf wie folgt aussieht:

fetch('http://localhost:8080/api/path?p=test') 
     .then(res => { 
      console.log(res); 
     }); 

Was mache ich falsch? Ich habe keine Ahnung.

+2

Haben Sie versucht, eine Anfrage mit Postboten oder ähnlichen Apps zu senden? Anderenfalls akzeptiert Ihr Backend Cross-Ursprungsanforderungen? – Tugrul

+0

Versuchen Sie in Ihrem Browser http: // localhost: 8080/api/path? P = testen. Funktioniert es? –

+1

Verbindung abgelehnt bedeutet genau das, was sie sagt, aus irgendeinem Grund kann sie nicht mit Ihrem Backend kommunizieren. Überprüfen Sie, ob Ihr Pfad korrekt ist, ob Ihr Backend läuft, .... Wir können dieses Problem mit den Informationen, die wir gerade haben, nicht lösen. – g00glen00b

Antwort

6

Ein net::ERR_CONNECTION_REFUSED Fehler wird normalerweise ausgelöst, wenn Ihr Frontend (React-Anwendung) keine Verbindung mit Ihrem Back-End herstellen kann (Ihre Spring-Boot-Anwendung). Es gibt viele mögliche Gründe für dies geschehen kann, wie zum Beispiel:

  • Ihre Back-End-Anwendung nicht
  • läuft Der Weg zum Back-End-Anwendung ist nicht korrekt
  • Es gibt eine Art von Firewall zwischen Front- und back-End-Anwendung, die den Verkehr
  • ...

In Ihrem Fall stoppt es erschien die back-End-Anwendung, die nicht ordnungsgemäß ausgeführt wurde.

Ihr zweites Problem hängt mit CORS zusammen, einem Mechanismus, der verhindert, dass JavaScript eine Verbindung zu anderen APIs/Websites herstellt, die sich nicht in derselben (Sub-) Domäne und demselben Port befinden. In Ihrem Fall läuft Ihr Frontend auf einem anderen Port als Ihr Backend, das heißt, Sie müssen sich mit CORS beschäftigen.

Um CORS zu behandeln, müssen Sie Ihrem Backend eine Überschrift hinzufügen (nämlich die Access-Contol-Allow-Origin-Kopfzeile, die der Fehler erwähnt). Mit Spring, können Sie das tun, indem Sie die folgende Anmerkung zu Ihrem Controller hinzufügen:

@CrossOrigin(origins = "http://localhost:3000") 

Oder Sie können CORS konfigurieren global mit einem Filter oder mit WebMvcConfigurer:

@Bean 
public WebMvcConfigurer corsConfigurer() { 
    return new WebMvcConfigurerAdapter() { 
     @Override 
     public void addCorsMappings(CorsRegistry registry) { 
      registry.addMapping("/api/**").allowedOrigins("http://localhost:3000"); 
     } 
    }; 
} 

Wie @ in den Kommentaren erwähnt Lutz Horn wird dies auch in einer Spring guide beschrieben.

Verwandte Themen