Proxy-Anforderungen vom Client reagieren App auf Server mit create-react-app und Webpack-Dev-Server

Question

Der Versuch, serverseitige API für die Client-Anwendung zu erstellen. Der Client wird komplett auf reagieren geschrieben. In der Entwicklung wird mit webdevserver auf Port bedient 3000. Der Server auf Port hört 3001. Ich habe hinzugefügt Proxy auf die package.json Datei der Client-Anwendung wie folgt:

{ 
    "name": "client", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-scripts": "0.8.5" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.2", 
    "superagent": "^3.4.1" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    }, 
    "proxy": "http://localhost:3001/" 
} 

aber sobald ich den Server API bin anfordernden es schlägt fehl:

import Request from 'superagent'; 

export function searchTasks(text, callback) { 
    Request.get('http://localhost:3000/api/v1/tasks', response => { 
    callback(response.body.Search); 
    }) 
} 

Antwortobjekt ist Null. Wenn ich versuche, API mit 3001 Port anzufordern - alles funktioniert gut. Es sieht so aus, als ob web-dev-server die Anfragen nicht annimmt oder vielleicht einige zusätzliche Konfigurationsoptionen verpasst habe?

Answer 1

Der Grund dafür ist, dass Sie superagent verwenden, um Ihre Anfragen zu bearbeiten. superagent sendet den falschen Accept Header für den create-react-app Proxy, um ordnungsgemäß zu funktionieren. Laut den Kommentaren in der create-react-app documentation verwendet das Proxy-Setup einige Heuristiken, um zu verarbeiten, was an die History-API gesendet werden sollte und was zu Proxy-Zwecken verwendet werden sollte.

Sie können dies am einfachsten beheben, indem Sie Ihrer Anfrage .accept('json') hinzufügen. Das ist wie so getan:

import Request from 'superagent'; 

export function searchTasks(text, callback) { 
    Request.get('http://localhost:3000/api/v1/tasks') 
    .accept('json') 
    .end(response => callback(response.body.Search)); 
} 

Eine andere Möglichkeit ist es, die fetch API zu verwenden. In der Dokumentation können Sie mehr darüber lesen (und erfahren, wie Sie es für ältere Browser füllen).