Fetch API funktioniert nicht mit localhost/127.0.0.1

Nur als hintergrund, ich habe eine app reagieren sitzen auf einem remote-EC2-Ubuntu-Instanz. Dem gleichen server läuft auch eine Go-app lauscht auf port 8080 (port wurde geöffnet, um alle von den Sicherheits-Einstellungen).

Ich versuche, eine Anfrage zu stellen mit Fetch API, aus der app Reagieren, wie folgt:

var bearer = 'Bearer ...'
return fetch('http://localhost:8080/home', {
  headers: new Headers({
    'Authorization': bearer
  })
})

In der Konsole von Chrome und Firefox, bin ich immer:

TypeError: NetworkError, wenn Sie versuchen zu Holen Ressource

Das gleiche gilt, wenn ich Ersatz localhost mit 127.0.0.1.

Verwendung der externen IP von der EC2-Instanz, jedoch klappt (und löst einen CORS-request - aufgrund der 'Authorization' - header - was ist reibungslos durch den server).

Im letzteren Fall, ich sehe auch die server-Protokollierung der eingehenden Anfragen für beide OPTIONEN, und BEKOMMEN (im ehemaligen Fall, keine logs vorhanden sind, die entweder für die Methode).

Ich habe auch versucht LOCKE ' Ing aus dem EC2-Maschine localhost und die Anforderung effektiv geht durch die führt mich zu glauben, dass mit der Fetch-API-Anfrage wird nicht ausgelöst, an alle.

Jede Beratung wäre geschätzt. Wenn ich etwas falsch bitte zeigen Sie mich in die richtige Richtung.

  • Die url, die Sie verwenden in Ihrem browser um die Seite zu öffnen (das macht die eigentliche fetch-Anfrage)?
  • Ich bin mit der externen IP-Adresse von der EC2-Instanz (port 80), die gleiche IP-Adresse, wo die erfolgreichen Fetch-Anfrage gerichtet ist.
InformationsquelleAutor Andy | 2017-05-27
  1. 2

    Beim schreiben localhost ruft Ihre (localhost) Computer (auf dem der browser vorhanden ist), weil die js code läuft in Ihrem browser.

    Sollten Sie eine domain/sub-domain für Ihre API-Endpunkt und verwenden Sie es anstelle von "localhost" oder " weiterhin verwenden, die hart-codierte IP-Adresse.

    Sollten Sie auch damit nur Ihre frontend-website-domain in der zulässigen Ursprünge für Ihr backend. Ex. Ihre website kann www.example.com - und backend-url kann www.api.example.com. Sollten Sie damit nur www.example.com als origin die bedient werden können, durch www.api.example.com. Konfigurieren Sie diese im backend.

    • Danke, das macht Sinn. Obwohl diese besser geeignet sein können für eine weitere Frage, die ich stellen möchte, wie würden Sie gehen über das halten der gleichen Konfiguration zwischen dem lokalen Entwicklungscomputer (über localhost) und die remote-Produktions-Maschine (nicht in der Lage, verwenden Sie "localhost"), wenn überhaupt möglich?
    • Ich habe zwei Umgebungen. Im Grunde halten eine webkpack.config.js und webpack.config.prod.js. Und verwenden DefinePlugin im webpack zu definieren, Ihre backend-subdomain. In prod config verwenden subdomain und in dev config, localhost verwenden. Auch Erlaube ich, dass alle Ursprünge in mein backend in der dev-Modus.
    • Super!!! Das ist genau das, was ich mir erhofft hatte.
    InformationsquelleAutor Rubbal
  2. 4

    Ich hatte gerade das gleiche problem. Ich schaffte es, diese arbeiten durch das hinzufügen "proxy": "http://localhost:4000" zu package.json.

    Dann können Sie schreiben Anfragen wie fetch('/api/todos').

    Erklären Sie es gut hier.

    • Denken Sie daran, um starten Sie die Server!
    InformationsquelleAutor Ankan
  3. 3

    Wenn Sie versuchen, senden Sie eine Anfrage an localhost, und Sie hosten Ihre server auf localhost, dann brauchen Sie nicht zu geben Sie die url, die Sie brauchen nur zu sagen fetch() Ihren Weg.

    Beispielsweise mein api-Endpunkt ist http://localhost:8082/api/config würde, dann würde ich das tun fetch('/api/config').

    Hier ist ein link zu fetch Methode, link

    InformationsquelleAutor KevinZhou
Schreibe einen Kommentar