1

在 React 中初始化 Shopify 的 AppBridge 需要一个apiKey和shopOrigin. 我获取数据并加载我的开发服务器，但遇到错误：

无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“ https://example-test-app.myshopify.com ”）与收件人窗口的来源（“ http://localhost:3000 ”）不匹配

AppBridge与此状态下的作品无关。

我发现满足此错误的唯一方法是创建一个 js 构建并通过我的node服务器将其用作静态资产，然后通过 Shopify 管理员访问该应用程序。这样指定的目标原点将匹配接收窗口的原点，但我想避免在每次前端更改后创建构建。有没有其他方法可以配置AppBridge或解决它，以便我可以继续在本地主机上的前端工作，在那里我可以利用 webpack 的热模块重新加载？

// app.component.tsx

import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';

const AppComponent: React.SFC<AppProps> = ({
}) => {
  const appBridgeConfig = {
    apiKey: process.env.API_KEY,
    shopOrigin: shopDomainName,
  };


  return (
    <AppProvider i18n={{}}>
      <Provider config={appBridgeConfig}>
        <Dashboard />
      </Provider>
    </AppProvider>
  );
};

// Dashboard.component.tsx

import { Context, Loading } from '@shopify/app-bridge-react';

export const Dashboard: React.SFC<DashboardProps> = () => {
  return (
    <Context.Consumer>
      {app => {
        console.log('app: ', app);
        console.log(
          'appstate: ',
          app?.getState().then(res => {
            console.log('res: ', res);
          }),
        );
        return (
          <div>
            <Loading />
            <div>Testing</div>
          </div>
        );
      }}
    </Context.Consumer>
  );
};

一个相关的线程：

如何将新的 @Shopify/app-bridge 与 @Shopify/polaris-react 一起使用

我可以AppBridge与 合作Polaris，但我现在遇到了与那个人结束时相同的问题。

4

1 回答 1

0

如果您在 Windows 上，您可以将域名指向本地C:\Windows\System32\drivers\etc\hosts

像这样在文件末尾：

127.0.0.1   https://example-test-app.myshopify.com

我认为其他操作系统可以为您提供类似的功能。

于 2020-07-02T15:53:38.683 回答