2017-09-12 4 views
1

更新:修正済み。リクエストが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上でホストされているときにリクエストが機能するでしょうか?

+0

コードからもう少し追加して、 'fetch'に' then'の後に 'catch'を追加することができますか?たぶん、より詳細なエラーが何が間違っているかを示すことができます。 – bennygenel

+0

CORSをチェックしないでローカルからローカルにリクエストするとき、郵便配達員からリクエストするとすぐに指定の動詞(ポスト、プット、削除、取得、...)を行います。動詞ブラウザーがどのヘッダーが許可されているか、その他のものがあるかをチェックするオプションを作る前に、あるドメインから別のドメイン(herokuにローカル)を作成してブラウザーから実行すると... – KondukterCRO

答えて

1

'Content-Type'ではなく 'Content-Type'を使用してください。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests https://fetch.spec.whatwg.org/#cors-safelisted-request-header

説明:あなたは間違ったケースを使用する場合、それはカスタムヘッダとみなされ、したがって、プリフライトリクエストは、このような場合に送信されます。 OPTIONSリクエストが正しいcors specを持つサーバーで実装されている場合、次のPOSTが送信されます。そうでなければ、送信されず、要求は失敗します。上記のリンクの詳細

関連する問題