I am using R2 to serve static files for my webpage index.html:
<script type="module" src="{% static 'js/display.js' %}"></script>
<script type="module" src="{% static 'js/run-model.js' %}"></script>
<script src="{% static 'js/file.js' %}"></script>
display.js
import { variable1, function1} from "./run-model.js";
run-model.js
import { variable2, function2} from "./display.js";
The site is able to load the js files, but then in addition it throws CORS errors for the modules as they try to import variables. I have tried adding a rule in Cloudflare to set an Access-Control-Allow-Origin header to * and also set a CORS policy on the bucket for anything from my domain https://www.example.com. Still the same issue… Why is this?
Access to script at ‘https://<>.r2.cloudflarestorage.com/bucket/js/display.js’ from origin ‘https://www.example.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
GET https://<>.r2.cloudflarestorage.com/bucket/js/display.js net::ERR_FAILED 400 (Bad Request)
Access to script at ‘https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js’ from origin ‘https://www.example.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
GET https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js net::ERR_FAILED 400 (Bad Request)
The two failed items don’t have the Access-Control-Allow-Origin header and have the Content-Type header as ‘application/xml’:
