12

I am trying to load an asset (a font) from an s3 bucket. Fonts on Firefox and IE need to have Access-Control-Allow-Origin headers returned in the response. Unfortunately it seems that Chrome is not sending an "Origin" request header. Since it is not sending an Origin request header, S3's CORS policy is not returning the required Access-Control-Allow-Origin header.

Here is an example request screenshotted from the Chrome inspector panel:

Why is there no "Origin" Header in the Requset Headers?!

enter image description here

The page making this font request is at https://proximate.com and is hosted on Heroku.

Evan
  • 7,396
  • 4
  • 32
  • 31

2 Answers2

0

Before making the GET request for the font, Chrome would have sent a preflight OPTIONS request for the font resource. It is in this preflight request that Chrome would have sent the Origin header. S3's CORS policy would have returned the required Access-Control-Allow-Origin header in response to this preflight OPTIONS request.
Thereafter, Chrome would have made the GET request for the font -- the request that you have shown in the screenshot. Chrome would not send the Origin header in this GET request now. And as the screenshot shows, the request was successful (Status Code 200 OK). Also note the Amazon headers (starting with x-amz-) and Server: AmazonS3 present in the response.
It does seem that your site https://proximate.com would have received the font from Amazon S3. Was that not the case?

For more details please see the links https://spring.io/understanding/CORS and https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html.

Sanjeev Sachdev
  • 1,241
  • 1
  • 15
  • 23
0

I had exactly this same issue and after hours of banging my head against the wall I found that something with Chrome's HTTP caching mechanism prevents the Origin header from being sent. This is a Chrome-specific issue as I could not reproduce it with Safari. You can check whether this is the case for you as well by toggling the "Disable Cache" option under the Network tab of Chrome developer tools.

To force your request to ignore the cache, use appropriate cache option (documentation). This is my final working code:

fetch(url, {
  method: 'GET',
  mode: 'cors',
  cache: 'no-store', // for some reason Chrome's caching doesn't send Origin
})
Stephen
  • 175
  • 1
  • 8