バックエンドAPIをHerokuにデプロイし、フロントエンドAPIで呼び出そうとしています。これを実行してログを確認すると、使用されているメソッドがPOSTではなくOPTIONSであり、何も返されないことが示されています。ただし、Postmanからリクエストすると、メソッドがPOSTと表示されます。ローカルホストにデプロイされたときの同じバックエンドコードとフロントエンドは完全に正常に機能します。
1つ上のHerokuLogsはフロントエンドからのリクエストを示し、下はPostManからのリクエストです。
2020-09-22T04:50:00.422091+00:00 heroku[router]: at=info method=OPTIONS path="/api/signin" host=****-backend.herokuapp.com request_id=b93d3a15-23cf-42df-93f1-125d79017edf fwd="****" dyno=web.1 connect=1ms service=9ms status=200 bytes=215 protocol=https
2020-09-22T04:50:00.422973+00:00 app[web.1]: [0mOPTIONS /api/signin [32m200[0m 4.063 ms - 4[0m
2020-09-22T04:54:53.827158+00:00 heroku[router]: at=info method=POST path="/api/signin" host=****-backend.herokuapp.com request_id=91ccaa0c-e676-48aa-8856-364a1413460b fwd="****" dyno=web.1 connect=0ms service=60ms status=200 bytes=770 protocol=https
2020-09-22T04:54:53.822533+00:00 app[web.1]: [0mPOST /api/signin [32m200[0m 52.224 ms - 361[0m
私のフロントエンドアクションコード：
export const signin = (user) => {
return fetch(`${API}/signin`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify(user),
})
.then((response) => {
return response.json()
})
.catch((err) => console.log(err))
}
OPTIONSは、サーバーとの接続を確認するためにブラウザーによって呼び出されるデフォルトのメソッドです。Postmanはブラウザベースの呼び出しではないため、直接POSTリクエストを行うことができます。
HerokuでOPTIONSメソッドを処理し、200のステータスコードを返す必要があります。それはあなたの問題を解決するはずです。
express.jsを使用している場合は、コードに以下を追加してOPTIONSメソッドを処理できます。
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
// handle OPTIONS method
if ('OPTIONS' == req.method) {
return res.sendStatus(200);
} else {
next();
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加