I am using AMP-Autosuggest while I using this the error occurs. I Don't know how can I solve this.
The API And web are in different domain.
Error:
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.
Code:
<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>
I solve this problem with small changes done to my API server.
In My rails Serve I use rack-cors gem
In Config/application.rb
config.middleware.insert_before 0, "Rack::Cors" do
allow do
origins '*'
resource '*', headers: :any, methods: [:get, :post, :options]
end
end
Allow 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]