Websoket(Rails ActionCable)でSecurityError the operation is insecure

Question

発生している問題・エラーメッセージ

Websoket(Rails6.1 ActionCable)を利用したWebアプリの作成をしていますが
App.cable の Consumer作成時にエラーが発生します。
また、iPhone(Safari, Chrome)、Android(Chrome)でのみ発生し、PCブラウザで再現しないため原因の特定に困っています。

const consumer = App.cable;
try {
  const appRoom = consumer.subscriptions.create(
} catch (e) {
  alert(e); // => "SecurityError the operation is insecure"
}

nginxの /cable へのアクセスが502になっています

[15/Sep/2021:XX:XX:XX] "GET /cable HTTP/1.1" 502 584 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36"

試したこと

WSSの接続ができていないかもと考え、application.rb の allowed_request_origins などを変更してみましたが改善しません

config.action_cable.disable_request_forgery_protection = true
config.action_cable.allowed_request_origins = ["https://mysite.com", "https://www.mysite.com"]

補足情報（FW/ツールのバージョンなど）

Rails 6.1(production)
Puma(bind socket)
Nginx( 443 -> puma.socket )