更新:修正済み。リクエストが503に戻ってきたように見えますが、私のアプリケーションはリフレッシュされ、エラーメッセージ "Fetch failed loading"が表示されます。私はちょうどリフレッシュのために応答を見ていない。「読み込みに失敗しました」 - 郵便配達で働いていますが、ChromeとSafariで失敗します
ローカルにホストされているCreate-React-AppからHerokuがホストするノードサーバーにフェッチ要求を行うことができません。
ノードサーバーでCORSが有効になっています。私がPostman経由でPOSTリクエストを行うと、適切な応答が得られます(503、現在はデータベースが接続されていないため、データは保存されていませんので、別の応答を返信する必要があります。私の郵便配達人のリクエストは、コンテンツタイプとして'application/json'
、許可なし、本文は{ "rating": "5", "zipcode": "0" }
です。 "読み込みに失敗しました:オプション" https://shielded-gorge-69158.herokuapp.com/feedback "。"私はReactアプリケーションからPOSTリクエストをすると、私のコンソールにメッセージが届きました:"読み込みに失敗しました:オプション" https://shielded-gorge-69158.herokuapp.com/feedback "関連するエラーはなく、メッセージのみです。 [ネットワーク]パネルに要求に関する情報はありません。
フェッチ要求はlocalhost:3000(my app)からlocalhost:5000(私のサーバ)にローカルで行うと機能します。私がHerokuでホストされている(そうでなければ同一の)サーバーに要求を出そうとすると失敗するだけです。
return fetch('https://shielded-gorge-69158.herokuapp.com/feedback', {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({ rating: userRating, zipcode: userZip })
}).then(res => {
if (!res.ok) {
throw new Error('Error:', res.statusText);
}
return res;
}).catch(err => console.error(err));
編集:私は研究を続けてるとポストマンは/プリフライトリクエスト(https://github.com/postmanlabs/postman-app-support/issues/2845)を作成しないべきではありませんようにそれはそう
これはフェッチ要求がどのように見えるかです。だからおそらくそれは問題です - しかし、なぜ私のサーバーがローカルではなく、Heroku上でホストされているときにリクエストが機能するでしょうか?
コードからもう少し追加して、 'fetch'に' then'の後に 'catch'を追加することができますか?たぶん、より詳細なエラーが何が間違っているかを示すことができます。 – bennygenel
CORSをチェックしないでローカルからローカルにリクエストするとき、郵便配達員からリクエストするとすぐに指定の動詞(ポスト、プット、削除、取得、...)を行います。動詞ブラウザーがどのヘッダーが許可されているか、その他のものがあるかをチェックするオプションを作る前に、あるドメインから別のドメイン(herokuにローカル)を作成してブラウザーから実行すると... – KondukterCRO