Posted By: Anonymous
I am loading all my project’s resources from a cdn with
cors enabled, however html imports fail on the first page load (then succeed on loads after it).
link(rel="import" id="htmlImports" href=`components.html` async)
producing the following error:
s3 amazon No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have search almost every related page and tried a million solution such as:
- adding cors headers on the s3 bucket, some say that range solved their issue, some said that the expose header solved their issue, i added all and toggled between them, yet the same issue.
<?xml version="1.0" encoding="UTF-8"?>
in the cors spec, it is said that duplicate cors header will cause the request to fail, so i made sure no duplicates are there.
preflight request is enabled on the server and contains all the required configurations (allowed headers etc).
The solution to my issue was to add
crossorigin="anonymous" to the import link
link(rel="import", id="htmlImports", href=`components.html`, async, crossorigin="anonymous")
by default s3 bucket sends a
Access-Control-Allow-Credentials: true header, thus by adding
Cross-origin CORS requests for the element will have the omit credentials flag set.
this will get the html import request to work everytime.
if anyone has an alternative or can explain the behavior in details please do!