AzureサーバーでDOMExceptionエラーが発生する。

kintone の構築／設計／運用
1

kintoneの見積システムから基幹システムに売値情報を連携させる構築を行っています。一旦は成功したのですが、サーバーをAzureに変更後エラーが発生するようになりました。原因として、Azure側でセッションcookieを使いクライアントを認識する仕組みが、kintoneのcookie認証を誤認識させ、window.location.reload() でリロードする際にCORSエラーが発生するようです。kintone自体が内包しているjQueryが変更されたフィールド値を反映させる画面上の場所を特定するために、HTMLで書かれた画面の構成情報を読み込もうとします。しかし、セッションcookieが中継サーバから送信されているため、jQueryは現在表示中の画面がkintoneの画面ではなく、中継サーバが返すJSONを画面HTMLと認識してしまい、（現行画面がいつのまにかkintoneから中継サーバへと切り替わってしまう）値を反映させるkintone画面上の表示場所が見つけられず、エラーとなっているようです。

Azureの仕組みや設定に詳しいものがおらず、対策が分からない状態です。どなたかこういった経験やAzureサーバーに詳しい方がいらっしゃいましたらアドバイス頂けないでしょうか。

コンソールで下記のエラーが出ます。
DOMException: Failed to execute ‘matches’ on ‘Element’: ‘[s!=’‘]:x’ is not a valid
DOMException: Failed to execute ‘querySelectorAll’ on ‘Element’: ‘#sizzle1718673930805 .btn-primary:first’ is not a valid selecto
DOMException: Failed to execute ‘querySelectorAll’ on ‘Element’: ‘*,:x’ is not a valid selector.
ご参考：
location: reload() メソッド - Web API | MDN (mozilla.org)

コンソールスクショ：

image
image1670×588 203 KB

2

私もAzure全然わからないのでなんとも答えられず申し訳ないのですが・・・

パートナーさんに相談してみるというのはいかがでしょうか！？！

↓どこに頼めば～という場合は、Cybozuさんが一緒に探してくれるみたいです！

3

jurippeさん アドバイス有難うございます！
AzureのApplication Gatewayの設定により、テスト環境のコンソール上ではエラーが出なくなりました。来週の月曜日に本番環境で実装し、UAT行う予定です。

具体的な設定方法です。
下記画面では応答ヘッダーのAccess-Control-Allow-Originのヘッダー値に＊（アスタリスク）指定していますが、ここにkintoneサブドメインを設定することでエラー発生を防げるかと考えています。

image002 (1)
image002 (1)1094×660 36.3 KB

CORSの許可に関連する設定となり、設定が無い場合にブラウザがこの通信をブロックしていたのですが、＊（アスタリスク）指定でコンソール上のネットワークログではエラーが出なくなりました。このままでは全てのOrigin Resourceを許可してしまいセキュリティ上のリスクが有りますので、サブドメインに変更して検証する予定です。月曜日に確認して再度報告します。
何かのご参考になれば幸いです（コミュニティの皆さんからはこれまで助けて貰うばかりだったので、そろそろお返ししなきゃと思ってますが、実力が伴わない…）。

「いいね！」 1