为什么我在发出请求时在 Shopify 应用程序中收到“无效会话令牌”错误？

Question

我正在尝试从我的shopify应用程序发出请求，将方法发布到我的后端，即laravel和我的前端vue.js，我正在使用Inertia，我明白了。

Answer 1

为了澄清问题是什么以及如何解决，首先我认为有人会面临与我相同的问题，因此我认为不需要任何代码，因为这基本上是非常自我的错误解释说会话令牌已过期，您还想要什么？

发生此错误的原因是 Shopify 正在 Iframe 中运行应用程序，并且发出请求的令牌不匹配，因此您必须手动将令牌添加到请求中。我建议在调用方法时始终获取令牌，因为令牌每次都会更改一会儿。我添加了一些代码示例，我如何使用 Vue.js、Laravel、Inertia.js、Axios 处理它

submit() {
            let sessionToken = getSessionToken(app);
            sessionToken.then((token) => {
                axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
                axios.get(route('login',{'form' : this.form,'email':this.form.email,'password':this.form.password})
                ).then(
                    response => {
                        console.log(token);
                        Inertia.visit('/home', {
                            method: 'get',
                            only: ['auth'],
                            headers: {
                                'Authorization': `Bearer ${token}`,
                            },
                        });
                    }).catch(error => {
                    alert(error);
                });
            });
        },

这是在我的 app.blade.php 中，我在 Osiset github 上找到了它，不确定这是否是最佳解决方案 https://github.com/osiset/laravel-shopify/issues/594

@if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
            <script src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
            <script src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
            <script
                @if(\Osiset\ShopifyApp\Util::getShopifyConfig('turbo_enabled'))
                    data-turbolinks-eval="false"
                @endif
            >
                var AppBridge = window['app-bridge'];
                var actions = AppBridge.actions;
                var utils = window['app-bridge-utils'];
                var createApp = AppBridge.default;
                var app = createApp({
                    apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name ) }}",
                    shopOrigin: "{{ $shopDomain ?? Auth::user()->name }}",
                    host: "{{ \Request::get('host') }}",
                    forceRedirect: true,
                });
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

            </script>
    

            @include('shopify-app::partials.token_handler')
            @include('shopify-app::partials.flash_messages')
        @endif
        @inertia
    </body>
    <script>
        const getSessionToken = window['app-bridge-utils'].getSessionToken;
    </script>

或者，您可以禁用 csrf 令牌（不推荐）