I am trying to remove the bugs in this AJAX request. When running this AJAX call it loads the template quickly, but after some time (I think the timeout), the following error is logged to the console.
Failed to load https://api/endpoint:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://internal.msmni.com' is therefore not allowed access.
The application is hosted on IIS at app.domain.com and the API endpoint is at api.domain.com.
<iron-ajax id="ajaxCustomers"
url="https://api/endpoint"
method="post"
handle-as="json"
content-type="application/json"
body="[[request]]"
last-response="{{response}}"
loading="{{loading}}"
headers="Access-Control-Allow-Origin"></iron-ajax>
...
<template is="dom-repeat" items="[[response]]" as="item">
<p>[[customer]]</p>
</template>
Is there a way to properly set the header and/or configure the server to remove this error?
P.S.
I am using Node's Express and I have the following set in the server.js file.
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, content-type, Accept, Authorization, x-api-key")
The error No 'Access-Control-Allow-Origin' header means that your api doesn't set the Access-Control-Allow-Origin header in the response as this needs to be returned by the server to allow breaking the Same-Origin Policy (it is not enogh to have it in the request) see: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
So your api should set a header like Access-Control-Allow-Origin: app.domain.com so your app is allowed to read the data.