Twilio Functionsでの通常リクエストとプリフライトリクエストのレスポンスヘッダーの違い

7865 ワード
twilio TwilioFunctions twilio テキストリンク

バージョン

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でのレスポンスヘッダーの設定値を確認してみる
※ちゃんと自分で許可設定したはず…

utility.js
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で、プリフライトのレスポンスヘッダーは自分で設定できないよ！

って話でした。