Json file as amp-list source in Azure AppService -


i have created sample amp page 

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

its showing error below :

o 'access-control-allow-origin' header present on requested resource. if opaque response serves needs, set request's mode 'no-cors' fetch resource cors disabled.

i enabled cors using azure portal. still not working. can access json via browser directly.

please have try import amp-list , amp-mustache components in header, more details please refer document

the amp-list component fetches dynamic content cors json endpoint , renders using 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 demo this. following detail steps:

1. published web app amp page

enter image description here

2. enable cors web app in azure portal.

enter image description here

3. try view page browser

enter image description here

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 {             {                 visibility: hidden;             }              {                 visibility: visible;             }         }          @-moz-keyframes -amp-start {             {                 visibility: hidden;             }              {                 visibility: visible;             }         }          @-ms-keyframes -amp-start {             {                 visibility: hidden;             }              {                 visibility: visible;             }         }          @-o-keyframes -amp-start {             {                 visibility: hidden;             }              {                 visibility: visible;             }         }          @keyframes -amp-start {             {                 visibility: hidden;             }              {                 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"     }   ] }

Comments

Post a Comment

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more