Json file as amp-list source in Azure AppService

I have created a sample amp page with

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

Its showing error as below :

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.

I enabled CORS using Azure portal. But still its not working. I can access the json via the browser directly.

Solution

Please have a try to import the amp-list and amp-mustache components in the header, more details please refer to document

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>

I create a demo for this. The following is my detail steps:

1. Published a Web App with AMP page

2. Enable the CORS for the Web App in the Azure Portal.

3. Try to view the page from the browser

AMP page code:

<!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"
    }
  ]
}