Json 文件作为 Azure AppService 中的 amp-list 源

Question

我用

创建了一个示例 amp 页面

<amp-list width=auto
              height=100
              layout=fixed-height 
              src="https://my-azurewebsite/Data/Services.json" 
              >

显示错误如下：

o 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我使用 Azure 门户启用了 CORS。但它仍然不起作用。我可以直接通过浏览器访问json。

Answer 1

请尝试导入 header 中的 amp-list 和 amp-mustache 组件，更多详情请参考文档

The amp-list component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

我为此创建了一个演示。以下是我的详细步骤：

1.发布了带有 AMP 页面的 Web 应用程序

2。在 Azure 门户中为 Web 应用程序启用 CORS。

3。尝试从浏览器查看页面

AMP 页面代码：

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">   
    <link rel="canonical" href="https://ampbyexample.com/components/amp-list/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            animation: -amp-start 8s steps(1,end) 0s 1 normal both;
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden;
            }

            to {
                visibility: visible;
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden;
            }

            to {
                visibility: visible;
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden;
            }

            to {
                visibility: visible;
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden;
            }

            to {
                visibility: visible;
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden;
            }

            to {
                visibility: visible;
            }
        }
    </style>
    <noscript>
    <style amp-boilerplate>
        body {
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            animation: none;
        }
    </style></noscript>
    <style amp-custom>
        amp-list {
            margin-left: 16px;
        }

        .list-overflow {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
</head>
<body>
    <amp-list width=auto
              height=100
              layout=fixed-height
              src="https://my.azurewebsites.net/test.json"
              template="amp-template-id"
             >
    </amp-list>

    <template id="amp-template-id" type="amp-mustache">
        <div>
            <p>FirstName : {{firstName}}</p>

        </div>
    </template>
</body>
</html>

test.json :

 {
  "items": [
    {
      "firstName": "tom",
      "lastName": "test"
    },
    {
      "firstName": "tom1",
      "lastName": "test"
    },
    {
      "firstName": "tom2",
      "lastName": "test"
    }
  ]
}

Json 文件作为 Azure AppService 中的 amp-list 源

Json file as amp-list source in Azure AppService

azure

amp-html

azure-web-app-service