- Published on
APIGatewayのpreflight_requestによるエラーについて
- Authors
- Name
- snuow
- @snuow_w
preflight request とは
- CORS のプリフライトリクエストは CORS のリクエストの一つであり、サーバーが CORS プロトコルを理解していて準備がされていることを、特定のメソッドとヘッダーを使用してチェックします。
- セキュリティを高めるために必要な機構っぽい
- method=OPTIONS でリクエストされて、決まったヘッダーが帰ってこないと CORS エラーになる。
対処法
APIGateway
- APIGateway で axios の POST を受けるためには、リソースの method に OPTIONS を加える必要がある。
- また、適切なヘッダを返す必要がある。例えばこんな感じ。
return {
'statusCode': 200,
'headers': {
"Content-Type": "application/json",
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
},
'body': json.dumps(body)
}
axios
- axios 側はこんな感じにしました。
axios.post(url, data, { headers: { 'Content-Type': 'application/json' } }).then((response) => {
console.log(response.data)
})