So rufen Sie localhosted API von Reactjs?

Ich versuche eine Anfrage von meiner reactjs-Client-Seite (läuft auf dem Webpack-Server) an mein Test-Backend in Java zu stellen.So rufen Sie localhosted API von Reactjs?

beide sind localhosted aber auf verschiedenen Häfen (3000 und 8888).

Wenn ich Postbote zu Anfrage an mein Backend verwende, bekomme ich die erwartete Antwort, so scheint alles richtig zu gehen.

Allerdings, wenn ich von reagieren beantragen will, ich habe diesen Fehler zu CORS bezogen werden:

XMLHttpRequest cannot load http://localhost:8888/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Ich glaube, mein Back-End-Server nicht HTTP-Anforderung nicht erlaubt von meinem Server reagieren. Also muss ich einen Weg finden, mein Backend wissen zu lassen, dass es in Ordnung ist, die Anfrage zu bearbeiten.

Es gibt mein Test-Backend. Wie ich schon sagte, wird mein Backend als API und nicht als Servlet verwendet.

public class test { 
     public Name getName() { 
      Name name = new Name("John"); 
      return name; 
     } 
}

Irgendeine Lösung?

Quelle

2017-01-05 John

Sie müssen "Access-Control-Allow-Origin" in Antwortheader hinzufügen – dpaksoni

Ich weiß nicht speziell über Java, aber Sie müssen die Antwortheader auf der Java-Seite ändern.

Für Entwicklung (nur in der Entwicklung) können Sie die folgenden Header in Platz haben müssen:

header("Access-Control-Allow-Origin", "*")

Quelle

2017-01-05 05:06:48 Chris

Dies ist die richtige Antwort, aber ich sehe keinen Grund, es mit "nur in Entwicklung" zu qualifizieren. Wenn der Server sich nicht hinter einem Intranet/einer Firewall befindet und jemand mit postman oder curl Anfragen an den Server senden kann, gibt es fast immer keinen guten Grund, den Header "Access-Control-Allow-Origin: *" nicht zu senden. Der einzige Fall ist im Allgemeinen, wenn Anmeldeinformationen auch in Anforderungen gesendet werden müssen. Aber alles, was gesagt wird, wenn dieser Server in einem Intranet oder einer Firewall ist, dann ist das eine andere Geschichte. – sideshowbarker

Sehr wahr, es klingt so, als wäre das ursprüngliche Poster vielleicht neu, um Inhalte von einem Server zu bedienen, also war ich besser als Nachsicht. Ich neige auch dazu, nur das zu öffnen, was unbedingt benötigt wird, anstatt alles zu öffnen und den Zugang zu straffen. Das Originalposter hat keine Details über seine Produktionsumgebung preisgegeben, daher kann ich nicht in guter Absicht einen Rat geben, der versehentlich auf eine Produktionsumgebung angewendet werden könnte, ohne die ganze Geschichte zu kennen. – Chris

sollten Sie fügen 'Access-Control-Allow-xxx' an dem Header-Antwort auf Ihrem Server -Seite.

res.header("Access-Control-Allow-Origin", "*"); 
res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 
res.header("Content-Type", "application/json;charset=utf-8");

Quelle

2017-01-05 05:13:55 ryouaki

Dies liegt daran, dass Sie CORS-Header hinzufügen müssen Quer Herkunft Zugang zu ermöglichen. Sie können das tun, indem Header der Antwort hinzufügen, die Sie wie dem folgenden Code zu senden sind:

@GET 
@Path("{id}") 
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML }) 
public Response getPodcastById(@PathParam("id") Long id, @QueryParam("detailed") boolean detailed) 
     throws IOException, AppException { 
    Podcast podcastById = podcastService.getPodcastById(id); 
    return Response.ok() 
      .entity(podcastById, detailed ? new Annotation[]{PodcastDetailedView.Factory.get()} : new Annotation[0]) 
      .header("Access-Control-Allow-Origin", "*") 
      .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT") 
      .allow("OPTIONS").build(); 
}

Weitere Bezug auf CORS-Header: http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/#2_Adding_HTTP_headers_to_resources_with_Jersey

Bei Frühling, können Sie wie folgt vorgehen:

Quelle

2017-01-05 11:58:40

So rufen Sie localhosted API von Reactjs?

Antwort

Verwandte Themen