Azure AppService中作为amp列表源的Json文件_Azure_Azure Web App Service_Amp Html

Azure AppService中作为amp列表源的Json文件

azure amp-html

Azure AppService中作为amp列表源的Json文件,azure,azure-web-app-service,amp-html,Azure,Azure Web App Service,Amp Html,我已经创建了一个带有amp的示例页面 <amp-list width=auto height=100 layout=fixed-height src="https://my-azurewebsite/Data/Services.json" > 其显示错误如下： o请求的资源上存在“Access Control Allow Origin”标头。如果不透明响应满足您

我已经创建了一个带有amp的示例页面

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

其显示错误如下：

o请求的资源上存在“Access Control Allow Origin”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

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

请尝试导入标题中的amp列表和amp胡须组件，更多详细信息请参阅文档

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

请尝试导入标题中的amp列表和amp胡须组件，更多详细信息请参阅文档

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

感谢您的详细帮助。现在开始工作了：）我还要补充一件事。在web.config中：之前我将“”放在CORS中。这也应该行不行？我的意思是代替“*”。请尝试在Azure portal中添加

*.ampproject.org

以替换

。有关AMP中CORS请求的更多信息，请参阅。感谢您的详细帮助。现在开始工作了：）我还要补充一件事。在web.config中：之前我将“”放在CORS中。这也应该行不行？我的意思是代替“*”。请尝试在Azure portal中添加

*.ampproject.org

以替换

。有关AMP中CORS请求的更多信息，请参阅。

<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>

<!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>

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