Json файл в качестве источника амп-лист в Azure AppService

Я создал страницу образца усилителя сJson файл в качестве источника амп-лист в Azure AppService

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

его показ ошибок, как показано ниже:

о 'Access-Control-Allow-Origin' заголовок присутствует на запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors» для извлечения ресурса с отключенным CORS.

Я включил CORS используя портал Azure. Но все же его не работает. Я могу напрямую получить доступ к json через браузер.

источник

2016-11-10 vishnu

Пожалуйста, попробуйте импортировать АМП-лист и усилитель-усов компоненты в заголовке, более подробная информация приведена в документе

ампер-список компонент извлекает динамического содержимого из 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. Опубликовано Web App с страницы AMP

2. Включите CORS для веб-приложения в Azure Portal.

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

источник

2016-11-11 07:14:12

Благодарим вас за подробную помощь. Теперь он работает. Еще одна вещь, которую я должен был добавить. В web.config: < "JSON" mimeMap FileExtension = MIMETYPE = "приложения/JSON" /> – vishnu

Ранее я поставил «HTTPS : //my.azurewebsites.net "в CORS. Это тоже не должно работать? Я имел в виду вместо «*». – vishnu

Пожалуйста, попробуйте также добавить '* .ampproject.org' в портал Azure для замены' * '. Подробнее о запросах CORS в AMP, пожалуйста, обратитесь к [документу] (https://github.com/dvoytenko/amphtml/blob/master/spec/amp-cors-requests.md). –

Json файл в качестве источника амп-лист в Azure AppService

ответ

Смежные вопросы