バージョン
twilio-cli / 2.11.0
Functionsでリクエスト時にカスタムヘッダーを付与したらCORSエラーになった
エラー内容
Access to XMLHttpRequest at 'https://~~~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-twilio-signature is not allowed by Access-Control-Allow-Headers in preflight response.
リクエスト時に自分で追加したカスタムヘッダーが許可されてませんっていうエラーの様です。
CORSエラーで良く見るタイプのやつ
Functionsでのレスポンスヘッダーの設定値を確認してみる
※ちゃんと自分で許可設定したはず…
const responseHeader = (allowOrigin, allowMethods) => {
const origin = allowOrigin ? allowOrigin : "*";
const method = allowMethods ? allowMethods : "HEAD, OPTIONS, GET, POST";
const response = new Twilio.Response();
response.appendHeader("Access-Control-Allow-Origin", origin);
response.appendHeader("Access-Control-Allow-Methods", method);
response.appendHeader("Content-Type", "application/json");
response.appendHeader("Access-Control-Allow-Headers", "Content-Type, X-Twilio-Signature");
return response;
};
※もしや大文字小文字？違いました
ちゃんと設定出来てるような気がするぞ？？
レスポンスヘッダーを見てみる
カスタムヘッダーを追加してるので、プリフライトリクエストが飛ぶよ
プリフライトリクエストでOPTIONSリクエストがGETの前（今回GETですがPOST
も同じ）に飛んでるので
自分でOPTIONSリクエストした時と、プリフライトでOPTIONSリクエストした時とで
レスポンスヘッダーを比べてみる
自分でOPTIONSリクエスト投げた時のレスポンス
| ヘッダー項目 | 値 |
|---|---|
| Access-Control-Allow-Methods | HEAD, OPTIONS, GET, POST |
| Access-Control-Allow-Headers | Content-Type, X-Twilio-Signature |
なんかちゃんと入ってそう
プリフライトリクエストでのレスポンス
| ヘッダー項目 | 値 |
|---|---|
| Access-Control-Allow-Methods | GET, POST, OPTIONS |
| Access-Control-Allow-Headers | Accept, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, User-Agent |
全然違う！
たしかにプリフライトの時はFunction内に仕込んだログが出てなかったので、
自分のFunctionまで来てないんだなと思ってたけど
リクエストの流れどうなってるのか
Functionのリクエストフローってページを見てみる
https://jp.twilio.com/docs/runtime/functions/request-flow
Twilio Functions Gatewayさんというものが間に入っていますね
このGatewayおじさんがプリフライト時のレスポンスを設定してるっぽい？？
結局わからん → サポートから回答貰いました
普通CORSエラー出た場合に、サーバー側にAccess-Control-Allow系項目の設定をすると思いますが
Twilio側でサーバーの設定をするようなところが無い？と思われます。
Twilio Functions Gatewayの設定が出来ればいいんですが…
サポートからの回答
Unfortunately we don't support Options - so this approach will not be available.
If you want to test a protected function, you can generate an X-Twilio-Signature, but you >won't be able to depend on any additional headers for the incoming request and use them to determine if access is allowed.
You can set additional headers on the outbound request from a function though.
OPTIONSリクエストは出来ない。
ただブラウザからは無理だけど、FunctionsからのリクエストにX-Twilio-Signatureを設定して呼ぶことは出来る。
って感じでしょうか…
とりあえず、protectedなFunctionをブラウザからX-Twilio-Signatureを設定してリクエストするのはダメみたいです。
Twilio Functionsで、プリフライトのレスポンスヘッダーは自分で設定できないよ！
って話でした。