FROM CACHE - jp_header

ログイン後のページでapp_proxyが動作するかどうか試したいがERR_NGROK_6024エラーになる

解決済

ログイン後のページでapp_proxyが動作するかどうか試したいがERR_NGROK_6024エラーになる

Azumi
Shopify Partner
7 2 0

お世話になります。

同様の状況になった方がいたらご教示いただきたいです。

Shopifyの開発ストアでアプリを構築中です。

 

現在、ストアのフロントからapp_proxyを用いて、アプリへリクエストを送る機能を実装中です。

 

theme-app-extensionも利用していて、アプリ立ち上げ時の

 

Preview your theme app extension:
http://127.0.0.1:9292

 

で表示されるURLからはこの機能は問題なく動作します。

 

▼リンクをクリックするとアプリが立ち上がる様子

9b8dca7f82c7bc77414156a46600095c.gif

 

ですが、開発ストアのURL(https://XXXXXXXXX.myshopify.com/)からこちらのリンクをクリックすると、

ERR_NGROK_6024 エラーとなります。

 

https://XXXXXXXXX.myshopify.com/から同じリンクをクリックした場合こちらの画面に遷移する

490478eb5d563e3c0d2bdc03befeacb8.png

 

何か設定が足りないのでしょうか?ご教示いただけますと幸いです。

2 件の受理された解決策

えすた
Shopify Partner
6 3 3

成功

2枚目の事象についてですが、NGROK (Store frontではなく、App Bridge側)の制限のようで

私は

"To remove this page " 〜以下で示されている3つの方法のうち

一番手軽な

User-Agentの書き換えで対応しています。

 

chromeなどの機能拡張でuser-agentを書き換える方が多いのでしょうか

例:user-agent switcher

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg...

 

私はなんとなく、、、機能拡張を入れたくなかったので

DevToolsで専用のUAを持ったデバイスを作成して作業しています。

 

UserAgentString 例:customer/non-standard chrome

スクリーンショット 2022-11-21 16.14.03.png

 

本音としては、上記のような制限が煩わしいので、ngrok以外方法で

使い勝手の良い方法があれば、試したいと思っています。

※他の方が良い方法をご存知なら私も教わりたいです

元の投稿で解決策を見る

えすた
Shopify Partner
6 3 3

成功

上記の投稿をした後気がついたのですが

ブラウザのCookieの設定を下記のように緩めると

UserAgentの設定を行わずに、ngrokのエラーが消えました。

(私は当初3rd Party Cookieをブロックする設定になっていました)

 

また、本投稿をご覧になった、別の開発者の方は

ブラウザの設定はどのようにされていますでしょうか。

 

推奨ブラウザについてドキュメントは見つかったのですが

推奨設定は見つからず

Shopify Adminでは3rd Party Cookieは必須でしたでしょうか。

https://help.shopify.com/en/manual/shopify-admin/supported-browsers

https://help.shopify.com/ja/manual/shopify-admin/supported-browsers

 

スクリーンショット 2022-11-21 18.58.12.png

元の投稿で解決策を見る

3件の返信3

えすた
Shopify Partner
6 3 3

成功

2枚目の事象についてですが、NGROK (Store frontではなく、App Bridge側)の制限のようで

私は

"To remove this page " 〜以下で示されている3つの方法のうち

一番手軽な

User-Agentの書き換えで対応しています。

 

chromeなどの機能拡張でuser-agentを書き換える方が多いのでしょうか

例:user-agent switcher

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg...

 

私はなんとなく、、、機能拡張を入れたくなかったので

DevToolsで専用のUAを持ったデバイスを作成して作業しています。

 

UserAgentString 例:customer/non-standard chrome

スクリーンショット 2022-11-21 16.14.03.png

 

本音としては、上記のような制限が煩わしいので、ngrok以外方法で

使い勝手の良い方法があれば、試したいと思っています。

※他の方が良い方法をご存知なら私も教わりたいです

えすた
Shopify Partner
6 3 3

成功

上記の投稿をした後気がついたのですが

ブラウザのCookieの設定を下記のように緩めると

UserAgentの設定を行わずに、ngrokのエラーが消えました。

(私は当初3rd Party Cookieをブロックする設定になっていました)

 

また、本投稿をご覧になった、別の開発者の方は

ブラウザの設定はどのようにされていますでしょうか。

 

推奨ブラウザについてドキュメントは見つかったのですが

推奨設定は見つからず

Shopify Adminでは3rd Party Cookieは必須でしたでしょうか。

https://help.shopify.com/en/manual/shopify-admin/supported-browsers

https://help.shopify.com/ja/manual/shopify-admin/supported-browsers

 

スクリーンショット 2022-11-21 18.58.12.png

Azumi
Shopify Partner
7 2 0

ありがとうございます!検証が遅くなってしまい申し訳ございませんが、いただいた方法にて解決することができました。