How to allow Partial Content response for a Range Request by AJAX (CORS) call

I’m getting 403 (forbidden) status code when performing AJAX call with a range request for partial content.
When calling directly using cURL, the response is 206, which is as expected.
What should be configured in order to allow Partial Content responses with AJAX calls?

Can you post the cURL call? My guess would be something in your request triggers either Cloudflare’s or your own security layer.

1 Like

curl -svo /dev/null -r 100-200

I would like to note:

Use of the Service for the storage or caching of video (unless purchased separately as a Paid Service) or a disproportionate percentage of pictures, audio files, or other non-HTML content, is prohibited.

This shouldn’t affect how partial content works, but know what Cloudflare is for, you can’t use it for pure video storage/caching. Make sure your main website is on Cloudflare and the majority of hits aren’t just to view video content.

And do you also have an example where you use that URL in an Ajax call?

var xhr = new XMLHttpRequest();“GET”, ’’, true);
xhr.setRequestHeader(‘Range’, ‘bytes=0-200’);
xhr.onreadystatechange = function() { if (this.readyState == this.DONE) { } };

I do use a paid service.

The issue appears to be CORS and that your request turns into an OPTIONS request which is presumably denied by your server.

Yes, this is what I know and I have already “disabled security” in the page rules to allow CORS.
What else could be done?

I am not sure whether that setting affects CORS. Have you checked if the OPTIONS request is maybe denied by your server?

It does affect CORS. Without disabling security at the page rules section, a simple get request over CORS is denied. After I disabled it the CORS request was permitted, but only when I did not do a range request for partial content.

It’s served by Cloudflare, no other server involved. So it seems that Cloudflare denies CORS with OPTIONS requests (which is sent when requesting for partial content). But I don’t know how to configure Cloudflare to allow it.


Try to set header Access-Control-Allow-Origin in your server

Thanks for your answer.
The question is not how to set Access-Control-Allow-Origin on my server but how to allow CORS for partial content response at Cloudflare since our files are completely served by Cloudflare. No other server is involved.

As mentioned earlier, when doing other AJAX calls that do not use the Range Request, I get the correct response. But once I add the Range header I get 403.

I don’t see Access Control in header responses

This is exactly the issue.
Try sending the request without setting the header “Range”.
You will see that the response does have the header “access-control-allow-origin: *”
When I send it with the Range header, I get 403 and an error that the “access-control-allow-origin: *” header is missing. Interestingly, you got 206, which is what I want.

I don’t see any access control in both kind of request
cache-control: public, max-age=14400
cf-cache-status: HIT
cf-ray: 493508fadd03c6e2-SGN
Content-Length: 201
Content-Range: bytes 0-200/8715317
content-type: video/mp4
date: Thu, 03 Jan 2019 11:13:15 GMT
etag: “43943cb2e8424c6b107f437757593988”
expect-ct: max-age=604800, report-uri=“
expires: Thu, 03 Jan 2019 15:13:15 GMT
last-modified: Wed, 02 May 2018 07:15:25 GMT
server: Cloudflare
status: 206
vary: Accept-Encoding
via: 1.1 (CloudFront)
x-amz-cf-id: hk-ir9Tdi3rWnm9wr9HakNbm1ASpb3JIzagaOPUZ3uCNegTpE9UVFw==
x-cache: Hit from cloudfront

I only see you pasted the request with the Content-Range header.
Here’s a request I just did without Range:

and here’s a request I jut did with Range:

Cache status is HIT but Expires time changed, what?
It so weird, you mind want to enable Development Mode to figure it out.