JavaScript get file size hosted on another origin without control of crossorigin headers
Here is a dummy PDF file available for download: https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
This is hosted on w3.org so I definitely won't have control of response headers.
My requirement is to render an <a download href="...">Download PDF</a> element to download the file, but before downloading I also want to get the file size and display it. Under the same origin, this can be done by (await fetch('...', { method: 'HEAD' })).headers.get('content-length'), but my approach was blocked by CORS:
This is expected, as they are not in the same region. Wondering whether there's any way to workaround this based on the fact I don't own or am able to edit the response header of the origin that is hosting the file I need to download?
Without control of the destination site, you will need to, like @Bergi suggests in the comments, create a proxy to get the size of the pdf. The implementation of this will differ depending on what language and framework you use, but the general idea would be to, when your api endpoint is accessed, make an http request from your backend to the target pdf, get the size, and send it in the http response. Because your backend code is not bound by the CORS rules enforced by browsers, it will be able to successfully retrieve the information you need.
You can learn more about CORS and how it works on Mozilla's developer documentation site
- How to Solve CORS error in accessing laravel routes
- Origin <origin> is not allowed by Access-Control-Allow-Origin
- Problem with CORS policy in React front end with FastAPI on the back trying to use Microsoft Single Sign-on
- How can I enable CORS on Django REST Framework
- Why the fetch gets failed even when I am using cors dependency?
- Firebase Storage and Access-Control-Allow-Origin
- Spring Boot Restful Service and CORS problem
- Background-image in CSS url blocked by Opaque Response Blocking
- Stripe Checkout example running into CORS error from localhost
- How to disable CORS policy for special routes in Node.js/Express server?
- Cors error persists no matter what I try with server
- How to handle cors in express js? It works with the HTTP module but the origin in the header undefined in express js
- Is there a way to update a Cors policy after startup?
- CORS error in node express REST API (PATCH Request)
- How to allow Cross-Origin using vite and express
- Setting cors in strapi 4
- How do i allow a CORS requests in my google script?
- Spring Security 6.3.3 WebFlux CORS
- cross origin resource policy issue when playing files from s3 on deployed app
- The 'Access-Control-Allow-Origin' header contains multiple values
- CORS error on same domain?
- CORS errors using Spring Boot, Spring Security and React
- CORS Error when trying to access API Gateway Endpoint
- Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?
- CORS Configuration not working in WSO2 API Manager for Oauth2/token API
- Google Web App Only Logging When Accessed Via Browser
- Access to web manifest blocked by CORS policy
- Forbidden access error: following Directus SDK tutorial
- Why are my getting a preflight/Option request between server to server POST request
- Angular CORS with Django