AMP-список Firebase INVALID_ARGUMENT __amp_source_origin - PullRequest
Новая
       46

AMP-список Firebase INVALID_ARGUMENT __amp_source_origin

0 голосов
/ 07 января 2020

Полноценный код электронной почты AMP, но мой вопрос актуален и для сайтов AMP: 

<!DOCTYPE html>
<html ⚡4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
html{line-height:1.15;-webkit-text-size-adjust:100%}body{background-color:#f5f5f5;margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type='checkbox'],[type='radio']{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-size:62.5%;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{background-color:#eeeeee;color:#000;font-size:1.6rem;font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;line-height:1.4}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background-color:rgba(17,127,253,0.4);text-shadow:none}::selection{background-color:rgba(17,127,253,0.4);text-shadow:none}svg:not(:root){overflow:hidden}a{color:#039be5;text-decoration:none;-webkit-text-decoration-skip:objects}a:hover{text-decoration:none}a:active{text-decoration:none}a:focus{outline:none;text-decoration:none}iframe{border:none}h1,h2,h3,h4,h5,h6,p{margin:0}.hidden{display:none}.show{display:block}.success{color:#3e8c86}.align-i-s{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-i-e{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.align-i-c{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.display-f{display:-webkit-box;display:-ms-flexbox;display:flex}.container_z{position:relative;z-index:1}.clear-btn{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0}.clear-list{list-style:none;margin:0;padding:0}.display-block{display:block}.flex-dir-c{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.float-r{float:right}.justify-c-s-b{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-c-e{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-c-c{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.img_width-full{height:auto;width:100%}.margin_r_sm{margin-right:20px}.margin_r_lg-1{margin-right:45px}.pos-relative{position:relative}.text-align-c{text-align:center}.btn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;border-radius:8px;background-color:#eb1e53;cursor:pointer;color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:400;font-size:1.8rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:0.3px;line-height:1.45;min-width:160px;outline:none;padding:6px 30px;text-align:center}.btn_xl{font-size:2.6rem;letter-spacing:2.3px}@media (max-width: 1020px){.btn_xl{font-size:2.2rem;letter-spacing:0.3px}}@media (max-width: 575px){.btn_xl{font-size:2rem}}.btn_full-width{width:100%}.btn_margin-b-sm{margin-bottom:20px}.btn.hidden{display:none}.chat{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);background-color:#fff;border-radius:2px;margin-bottom:30px;padding:16px}.chat__messages{height:400px;overflow-y:auto;margin:15px 0}.chat__message-container{display:block;border-bottom:1px solid #f3f3f3;padding:15px 0}.chat__name{color:#bbb;display:block;font-style:italic;font-size:12px}.chat__form{display:-webkit-box;display:-ms-flexbox;display:flex}.chat__input{border:1px solid #d1d5da;border-radius:3px;outline:none;-webkit-box-shadow:inset 0 1px 2px rgba(27,31,35,0.075);box-shadow:inset 0 1px 2px rgba(27,31,35,0.075);padding:15px;width:100%}.chat__btn{border:1px solid rgba(27,31,35,0.2);border-radius:3px;background-color:#0288d1;color:#fff;padding:0 30px}.footer-descr{color:#eeeeee;padding-right:15px;text-align:center}.footer{background-color:#0288d1;border-top:3px solid #ed1650;padding:20px 40px}@media (max-width: 575px){.footer{font-size:14px;padding:10px}}.footer__logo-link{display:block;max-width:174px;width:100%}.header{background-color:#0288d1;height:36px;margin-bottom:30px;padding:5px 40px}@media (max-width: 1020px){.header{padding:5px 20px}}@media (max-width: 575px){.header{margin-bottom:10px}}.header__logo-link{display:block;max-width:112px}.main-wrapper{max-width:1040px;margin:0 auto;padding:0 10px;width:100%}

</style>
  </head>
  <body>
    <div class="main-wrapper">
      <header class="header">
      </header>
      <div class="chat">
        <div class="chat__messages" id="messages">
          <amp-list height="400" items="documents" src="https://firestore.googleapis.com/v1/projects/friendlychat-fe591/databases/(default)/documents/messages">
            <template type="amp-mustache">
              <div class="chat__message-container"><span class="chat__message">{{fields.text.stringValue}}</span><span class="chat__name">{{fields.name.stringValue}}</span>
              </div>
            </template>
          </amp-list>
        </div>
      </div>
      <footer class="footer">
        <div class="footer-descr">&copy; Friendly Chat AMP4Email
        </div>
      </footer>
    </div>
  </body>
</html>

Я получаю сообщение об ошибке в консоли браузера:

enter image description here

В подробном исследовании: 

{
  "error": {
    "code": 400,
    "message": "Invalid JSON payload received. Unknown name \"__amp_source_origin\": Cannot bind query parameter. Field '_amp_source_origin' could not be found in request message.",
    "status": "INVALID_ARGUMENT",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.BadRequest",
        "fieldViolations": [
          {
            "description": "Invalid JSON payload received. Unknown name \"__amp_source_origin\": Cannot bind query parameter. Field '_amp_source_origin' could not be found in request message."
          }
        ]
      }
    ]
  }
}

С моего сервера с таким же json отлично работает, например: 

<!DOCTYPE html>
<html ⚡4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
html{line-height:1.15;-webkit-text-size-adjust:100%}body{background-color:#f5f5f5;margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type='checkbox'],[type='radio']{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-size:62.5%;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{background-color:#eeeeee;color:#000;font-size:1.6rem;font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;line-height:1.4}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background-color:rgba(17,127,253,0.4);text-shadow:none}::selection{background-color:rgba(17,127,253,0.4);text-shadow:none}svg:not(:root){overflow:hidden}a{color:#039be5;text-decoration:none;-webkit-text-decoration-skip:objects}a:hover{text-decoration:none}a:active{text-decoration:none}a:focus{outline:none;text-decoration:none}iframe{border:none}h1,h2,h3,h4,h5,h6,p{margin:0}.hidden{display:none}.show{display:block}.success{color:#3e8c86}.align-i-s{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-i-e{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.align-i-c{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.display-f{display:-webkit-box;display:-ms-flexbox;display:flex}.container_z{position:relative;z-index:1}.clear-btn{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0}.clear-list{list-style:none;margin:0;padding:0}.display-block{display:block}.flex-dir-c{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.float-r{float:right}.justify-c-s-b{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-c-e{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-c-c{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.img_width-full{height:auto;width:100%}.margin_r_sm{margin-right:20px}.margin_r_lg-1{margin-right:45px}.pos-relative{position:relative}.text-align-c{text-align:center}.btn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;border-radius:8px;background-color:#eb1e53;cursor:pointer;color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:400;font-size:1.8rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:0.3px;line-height:1.45;min-width:160px;outline:none;padding:6px 30px;text-align:center}.btn_xl{font-size:2.6rem;letter-spacing:2.3px}@media (max-width: 1020px){.btn_xl{font-size:2.2rem;letter-spacing:0.3px}}@media (max-width: 575px){.btn_xl{font-size:2rem}}.btn_full-width{width:100%}.btn_margin-b-sm{margin-bottom:20px}.btn.hidden{display:none}.chat{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);background-color:#fff;border-radius:2px;margin-bottom:30px;padding:16px}.chat__messages{height:400px;overflow-y:auto;margin:15px 0}.chat__message-container{display:block;border-bottom:1px solid #f3f3f3;padding:15px 0}.chat__name{color:#bbb;display:block;font-style:italic;font-size:12px}.chat__form{display:-webkit-box;display:-ms-flexbox;display:flex}.chat__input{border:1px solid #d1d5da;border-radius:3px;outline:none;-webkit-box-shadow:inset 0 1px 2px rgba(27,31,35,0.075);box-shadow:inset 0 1px 2px rgba(27,31,35,0.075);padding:15px;width:100%}.chat__btn{border:1px solid rgba(27,31,35,0.2);border-radius:3px;background-color:#0288d1;color:#fff;padding:0 30px}.footer-descr{color:#eeeeee;padding-right:15px;text-align:center}.footer{background-color:#0288d1;border-top:3px solid #ed1650;padding:20px 40px}@media (max-width: 575px){.footer{font-size:14px;padding:10px}}.footer__logo-link{display:block;max-width:174px;width:100%}.header{background-color:#0288d1;height:36px;margin-bottom:30px;padding:5px 40px}@media (max-width: 1020px){.header{padding:5px 20px}}@media (max-width: 575px){.header{margin-bottom:10px}}.header__logo-link{display:block;max-width:112px}.main-wrapper{max-width:1040px;margin:0 auto;padding:0 10px;width:100%}

</style>
  </head>
  <body>
    <div class="main-wrapper">
      <header class="header">
      </header>
      <div class="chat">
        <div class="chat__messages" id="messages">
          <amp-list height="400" items="documents" src="https://alexkazakov.info/layout/chat/data.json">
            <template type="amp-mustache">
              <div class="chat__message-container"><span class="chat__message">{{fields.text.stringValue}}</span><span class="chat__name">{{fields.name.stringValue}}</span>
              </div>
            </template>
          </amp-list>
        </div>
      </div>
      <footer class="footer">
        <div class="footer-descr">&copy; Friendly Chat AMP4Email
        </div>
      </footer>
    </div>
  </body>
</html>

Я новичок в Firebase. Как мне исправить эту ошибку?

  • Я взял пример чата для firebase отсюда: https://codelabs.developers.google.com/codelabs/firebase-web/ Теперь я хочу написать чат в AMP- Выполнение.
  • Я также написал функцию для CORS и добавил ее с помощью команды развертывание firebase --only functions : 

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.setCors = functions.https.onRequest((request, response) => {
  response.set('Access-Control-Allow-Origin', '*');
});
...