错误：appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin 必须提供答案

【问题标题】：Error : appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided错误：appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin 必须提供
【发布时间】：2020-09-11 20:12:31
【问题描述】：

我用 Koa 和 Nextjs 制作了 Shopify 应用程序，但是我收到了这个错误

appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided

应用程序的行为有点奇怪，因为当我第一次访问时，它运行良好。但是，几个小时后，我收到了这个错误。然后我研究了这个问题，我发现了这个案例。几个小时后，MyApp 类中的Cookies.get("shopOrigin") 将是空的。

[server.js 的部分代码]

....................
....................

app.prepare()
.then(() => {
  var httpServer = http.createServer(serverCallback);
  // var httpsServer = https.createServer(config.https.options, serverCallback);

  server.use(session({ secure: true, sameSite: 'none' }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];
  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: [
        'read_products','write_products',
        'read_orders', 'write_orders',
        'read_customers', 'write_customers',
        'read_script_tags', 'write_script_tags'
      ],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;

        ACCESS_TOKEN = accessToken

        ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none',
        });
        ctx.redirect('/');
      },
    }),
  );

  server.use(graphQLProxy({version: ApiVersion.October19}))
  server.use(verifyRequest());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    return
  });
....................
....................

[_app.js]

....................
....................

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
    console.log(`config`)
    console.log(config)
    return (
      <React.Fragment>
        <Head>
          <title>My LA Meats</title>
          <meta charSet="utf-8" />
        </Head>
       <Provider config={config}>
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
....................
....................

我猜这是 cookie 的问题，但我无法确认。你们有同样的问题吗？如果你知道我应该如何解决这个问题，请告诉我。

【问题讨论】：

标签： javascript node.js reactjs cookies shopify

【解决方案1】：

更改 0 行代码后我遇到了完全相同的错误，这似乎是因为 shopOrigin cookie 是 HttpOnly。为了确认这一点，我会尝试在控制台中运行document.cookie 之类的东西，看看是否会显示 shopOrigin cookie。

在我的情况下，cookie 在 chrome 和 firefox 中可见，一旦我取消了 shopOrigin cookie 的 HttpOnly 列，我就能够加载我的应用程序。但是，这是一个临时修复，因为 cookie 在重新启动 chrome 时重置为 HttpOnly。这令人费解，因为 server.js 中的 createShopifyAuth() 函数显式创建了 cookie，因此它不是 HttpOnly。

如果您找到解决方案，请告诉我。

【讨论】：