构建公共 Shopify 应用程序时出错：ngrok.io 拒绝连接答案

【问题标题】：Error building a public Shopify app: ngrok.io refused to connect构建公共 Shopify 应用程序时出错：ngrok.io 拒绝连接
【发布时间】：2020-01-23 06:29:30
【问题描述】：

我想要一个公开的非嵌入式 Shopify 应用。这个应用程序是一个销售渠道，它将产品从 Shopify 商店导入到我的电子商务网站。安装该应用程序的商店将在我的电子商务网站上列出其产品。

我已经建立了安装应用程序并将产品导入我的电子商务网站的初始步骤。

现在，当用户点击应用程序图标时，我希望他被重定向到以下显示导入产品列表的页面：

https://my-commerce.com/products?storeurl=perisn-handcrafts.myshopify.com

如果以上链接返回如下产品列表，则该产品列表将显示在 Shopify 管理控制台中：

<table data-toggle="table">
    <thead>
        <tr>
            <th>UniqueThirdPartyProductCode</th>
            <th>Title</th>
            <th>Price</th>
            <th>ImageUrl</th>
            <th>CombinedCategoryViewModel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>39-4477334519894</td>
            <td>Blue</td>
            <td>550.00</td>
            <td></td>
            <td>"todo"</td>
        </tr>

        /* more data... */

    </tbody>
</table>

但是，如果我将表格放在页面布局中，将<html>、<head> 和<body> 标记添加到结果中，则结果不会显示...例如，如果我的应用返回以下 HTML ：

<html>
<head></head>
<body>
    <table data-toggle="table">
    /* 
     * content of the table 
     */
    </table>
</body>

我会得到这个结果：

我不确定为什么会收到此错误：

ngrok.io 拒绝连接

我的应用似乎嵌入在 Shopify 管理控制台中，是否可以构建一个未嵌入的公共应用？

【问题讨论】：

您显示的错误与 ngrok 连接或您的 http 响应（可能是错误代码）更相关。我建议首先检查您机器上的 ngrok 输出，因为它可能会引导您找到最佳方向（检查您是否看到传入的请求）

标签： shopify shopify-app

【解决方案1】：

更新答案

我的 Shopify 应用是一个销售渠道，Shopify 要求将所有销售渠道嵌入到管理控制台中 (I learnt this the hard way)

为了使应用嵌入到 Shopify 管理控制台中，我们需要从响应中删除 X-Frame-Options 标头。我的应用程序是在 ASP.NET MVC 中开发的，我已将以下代码添加到 Global.asax 以删除上述标头（请注意，删除 X-Frame-Options 会使我们的网站暴露于 clickjacking 攻击，因此仅针对此特定删除标头目的）：

Global.asax

protected void Application_PreSendRequestHeaders()
{
    var routeValues = HttpContext.Current.Request.RequestContext.RouteData.Values;
    if (routeValues.ContainsKey("controller"))
    {
        // make sure you only remove the header for a very specific use case
        if (string.Equals((string)routeValues["controller"], "EmbeddedShopifyController", StringComparison.InvariantCultureIgnoreCase))
        {
            Response.Headers.Remove("X-Frame-Options");
        }
    }
}

原答案

此错误的原因是我已将我的应用程序配置为嵌入。要检查您的应用是否已嵌入，请转到您的 Shopify 合作伙伴页面：

应用程序 -> 扩展程序 -> 嵌入式应用程序

单击管理嵌入式应用程序按钮，您可以在此处查看应用程序是否配置为嵌入式。您可以启用/禁用此设置。

就我而言，我禁用了嵌入式应用配置，我的应用现在可以正常工作了。

【讨论】：