Question

我已经使用

创建了一个示例放大器页面

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

显示错误如下：

o＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。如果不透明的回复符合您的需求，请将请求的模式设置为“无人”状态。在禁用CORS的情况下获取资源。

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

Answer 1

请尝试在标题中导入amp-list和amp-mustache组件，更多详情请参阅文档

amp-list 组件从 CORS JSON 端点获取动态内容，并使用提供的模板呈现它。

<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 App启用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源

1 个答案: