Question
CORS ISSUE on droplet
Hello. Currently i’m using Rails from my app.
Try to send JS request from another server (website)
<script>
const imageUrl = 'https://insight-hunter.com/test.jpg';
fetch(imageUrl, { mode: 'cors' })
.then(response => response.blob())
.then(
blob =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(new Uint8Array(reader.result));
reader.readAsArrayBuffer(blob);
})
)
.then(imageBytes => {
parent.postMessage({ pluginMessage: imageBytes }, '*');
});
</script>
Receive this message:
Access to fetch at 'https://insight-hunter.com/test.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Receive headers:
accept-ranges: bytes
age: 3365
cache-control: max-age=14400
cf-cache-status: HIT
cf-ray: 6100d4611bb23dfe-EWR
cf-request-id: 07946310ac00003dfed51fd000000001
content-length: 492144
content-type: image/jpeg
date: Mon, 11 Jan 2021 18:51:31 GMT
etag: "5ffc674a-78270"
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
last-modified: Mon, 11 Jan 2021 14:57:14 GMT
nel: {"report_to":"cf-nel","max_age":604800}
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=0ovIr7fF%2FMSz7qwVPHRbyala8ofYVcCK4M8InglxTSrfbmf0uwYuvvb4ssJhnrv%2BAE4XccT6ftJ4stBI%2B%2B%2FFo7rkbTJQGie7QVxMLL1dCB%2Fqp%2FY%3D"}],"group":"cf-nel","max_age":604800}
server: cloudflare
set-cookie: __cfduid=dbb9cbf2bf084c5cfc2b909619736437b1610391091; expires=Wed, 10-Feb-21 18:51:31 GMT; path=/; domain=.insight-hunter.com; HttpOnly; SameSite=Lax
status: 206
vary: Accept-Encoding
How Could I add this header to my application. I tried using Rack :: CORS. How can I solve this problem. As i understand this is Cloudflare issue
Thanks