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
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hello,
The error message you’re receiving indicates that the requested resource (https://insight-hunter.com/test.jpg) doesn’t have the required CORS headers set, and hence the request is blocked by the browser.
Given the headers you’ve shared, it’s evident that the resource is served through Cloudflare. While Cloudflare can impact the headers of your requests, the core CORS configuration typically comes from your origin server. In this case, that’s your Rails application.
If you’ve tried using Rack::CORS and it’s not working, let’s go through a step-by-step guide to ensure it’s properly set up:
-
Add the gem to your Gemfile:
gem 'rack-cors', require: 'rack/cors' -
Run:
bundle install -
Add the middleware to your application. You can do this in
config/application.rbor within the specific environment config file (e.g.,config/environments/production.rb):
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*' # This allows all origins. In a production app, you might want to restrict this.
resource '*', headers: :any, methods: [:get, :post, :put, :delete, :options]
end
end
- Restart your Rails server.
If you’ve followed the above steps and are still facing issues:
-
Cloudflare Headers: Cloudflare might overwrite some headers based on its caching mechanisms. Ensure that you haven’t set any specific Page Rules on Cloudflare that might be affecting the headers. Also, review any settings related to caching or security that might be stripping or altering headers.
-
Check your Rails App Directly: Bypass Cloudflare temporarily by modifying your
hostsfile (on your local machine) to point your domain directly to the IP address of your droplet. This can help you isolate whether the problem is on your server or with Cloudflare. -
Logging: Make sure to check your Rails logs to see if there are any errors or messages related to the CORS requests.
-
Other Middlewares: It’s possible that another middleware in your Rails app is altering or removing the CORS headers. Ensure that
Rack::Corsis at the right position in the middleware stack.
Best,
Bobby
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.