AMP 列表（自动建议）错误“no-cors”答案

【问题标题】：AMP-list (Autosuggest) error 'no-cors'AMP 列表（自动建议）错误“no-cors”
【发布时间】：2018-06-26 11:38:56
【问题描述】：

我在使用 AMP-Autosuggest 时出现错误。我不知道我该如何解决这个问题。

API 和 web 在不同的域中。

错误：

No '**Access-Control-Allow-Origin**' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to '**no-cors**' to fetch the resource with **CORS** disabled.

代码：

<div class="suggest">
  <div
    class="autosuggest-container hidden"
    [class]="(showDropdown && query) ?
      'autosuggest-container' :
      'autosuggest-container hidden'"
  >
    <amp-list
      class="autosuggest-box"
      layout="fixed-height"
      height="120"
      src="https://myapi.com/data.json?q=xxx"
      id="autosuggest-list">
      <template type="amp-mustache">
        <amp-selector
          id="autosuggest-selector"
          keyboard-select-mode="focus"
          layout="container"
          on="
            select:
              AMP.setState({
                query: event.targetOption,
                showDropdown: false
              }),
              autosuggest-list.hide"
        >
          {{#results}}
            <div
              class="select-option no-outline"
              role="option"
              tabindex="0"
              on="tap:autosuggest-list.hide"
              option="{{.}}"
            >{{.}}</div>
          {{/results}}
          {{^results}}
            <div class="select-option {{#query}}empty{{/query}}">
              {{#query}}Sorry! We don't ship to your city ????{{/query}}
            </div>
          {{/results}}
        </amp-selector>
      </template>
    </amp-list>
  </div>
</div>


<amp-state id="autosuggest">
    <script type="application/json">
    {
      "endpoint": "https://myapi.com/data.json?q=xxx",
      "emptyAndInitialTemplateJson": [{
        []
      }]
    }
    </script>
  </amp-state>

【问题讨论】：

究竟有什么不清楚的地方？你知道 CORS 是如何工作的吗？如果没有，请继续阅读。
是的，但我如何根据要求指定
不知道你的意思。
不，我的意思是说它是由服务器端处理的 cors，或者我可以根据请求指定如果请求，那么我该怎么做，因为 AMP 没有给出适当的程序
如果你知道请告诉我

标签： ruby-on-rails amp-html amp-list

【解决方案1】：

我通过对我的 API 服务器进行小的更改来解决这个问题。

在我的 rails Serve 中，我使用 rack-cors gem

在 Config/application.rb

  config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :options]
      end
    end

允许 CORS

response.headers['AMP-Redirect-To'] = request.protocol+request.host_with_port+url
response.headers['Access-Control-Expose-Headers'] = 'AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin'
response.headers['AMP-Access-Control-Allow-Source-Origin'] = params[:__amp_source_origin]

【讨论】：