プロキシサーバーを使用しないで反応します

Question

私の反応アプリでpackage.jsonにプロキシを追加しました。プロキシサーバーをポート3001で起動しています。

私は両方の斧を使用して試してみましたが、それは重要ではないようです。あなたがそれをチェックアウトしたい場合はlink to the repoです。

そうでない場合は、ここに私の中package.jsonがアプリに反応さ：

{ 
    "name": "client", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:3001/", 
    "dependencies": { 
    "axios": "^0.17.1", 
    "react": "^16.0.0", 
    "react-dom": "^16.0.0", 
    "react-scripts": "1.0.14" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

私の超簡単なサーバー...

const express = require("express"); 
const bodyParser = require("body-parser"); 
const app = express(); 
const PORT = process.env.PORT || 3001; 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(bodyParser.json()); 
app.use(express.static("client/build")); 

app.get("/data", function(req, res){ 
    res.send({someData: 1234}); 
}); 

app.listen(PORT, function() { 
    console.log(" ==> API Server now listening on PORT ${PORT}!"); 
}); 

そして、私のApp.js内部を、私は呼び出そうcomponentDidMount関数内のAPI。これらのAPI呼び出しの

componentDidMount(){ 
    fetch("/data").then((data) => console.log(data)); 
    axios.get('/data').then(data => console.log(data)); 
} 

どちらも404を返し、http://localhost:3000/data

任意のアイデアのURL？

Answer 1

これを適切に診断するには十分な情報はありませんが、私はそれを刺すでしょう。しかし、私はいくつかの前提を作らなければならないだろう。

まず、リンク先のコードリポジトリは完全なプロジェクトではありません。私の推測では、このnode.jsサーバーをAPIサーバーとして実行しようとしていて、あなたのWebページと関連するアセットを提供している何かがあります。なぜ私はこれを考えるのですか？あなたのコードリポジトリには、/client/publicディレクトリのindex.htmlファイルをサーバ化するものは含まれていないためです。あなたのNode.jsサーバーが稼働し、ポート3001

に耳を傾けてい

• あなたのHTTPサーバが稼働し、ポート3000

に耳を傾けてい：

は、だからここに私はあなたの環境がどのように見えると思うものです

そして、ここでは何が起こっているのかです：

1. あなたはrequeを作りますあなたのindex.htmlファイルとあなたのJavascript、CSS、およびその他のアセットを提供するhttp://localhost:3000/へ。

2. あなたのリアクションコンポーネントは、/dataにGETリクエストを行います。あなたは完全なURLを指定していないので、ブラウザはあなたが意味することを推測する必要があります。この場合、ページを要求したのと同じホスト上のパス（http://localhost:3000）にアクセスしていると推測されます。したがって、http://localhost:3000/dataへのGETリクエストを行います。 APIは実際にはhttp://localhost:3001/dataをリッスンしています。

3. あなたのHTTPサーバは、そのパスで何かを持っていないので、それは404エラー

解を返しますか？この環境では、JavascriptでGETリクエストを作成するときに相対パスを使用しないでください。完全なURLを使用してください。