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?!
The page making this font request is at https://proximate.com and is hosted on Heroku.
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.
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
})
Related
Hello I am developing a web app, with a microservices architecture.
I am using golang (Fiber) on the backend and Next.js on the frontend.
When I send a request from restaurant.quiqr.co/signin to api.quiqr.co/auth/signin, I am sending a cookie along side the response from api.quiqr.co containing the jwt token.
Everything works fine on Postman, i can see the cookie being stored and sent with any follow up request.
But when it comes to web browsers, my cookie is not being stored. What could be the issue?
I am using kubernetes with Ingress nginx, but as i mentioned before everything works on Postman.
I tried to modify the cookie domain to .quiqr.co or restaurant.quiqr.co, but this did not work, I even tried all of the SameSite attributes, but nothing worked.
The only solution that worked is when I put all of them under the same domain. For example: quiqr.co/api/auth/signin and quiqr.co/restaurant/signin, the returned cookie will have a .quiqr.co domain and everything would work fine.
I also realized that when I do so, the browser wont send a Preflight request, but if i separate them again to subdomains the browser would send a Preflight request and the returned cookie wont be stored.
So what could be the issue here? Thank you.
Both requests- Preflight and xhr
xhr request content
No cookies in my devtools
Users have started having problems with Flash-based traffic under Chrome 80: Cookies are not being sent with POST requests.
I'm aware of the SameSite updates, but our traffic is all same-domain, so I assumed this wouldn't affect us.
Debugging the request headers from the debug tools:
Here's what I note:
In an older version of Chrome 73:
there are no Sec-Fetch-* headers
Origin header is always correct
cookies are sent properly
In Chrome 80, GET requests:
Origin is correct, and cookies are sent
now has Sec-Fetch-* headers
the Sec-Fetch-Site cookie says cross-site -- Is this right? This is determined by the browser, correct? Why would Chrome label the traffic as cross-site? - the request URL is the same as my page, same as window.location.hostname.
In Chrome 80, POST requests:
Sec-Fetch-* cookies same as GET
the Origin header is null - wait, why? This also is assigned by the browser, right? Why null?
cookies are not sent
This makes absolutely no sense to me. It's always worked, and we don't use multiple domains, and our cookies are secure and httponly. Can someone help me understand:
why Chrome 80 would label my requests as Sec-Fetch-Site: cross-site?
why Chrome 80 would send Origin: null and no cookies for POSTs?
I am experiencing the same problem. For the post request from Flash, sometimes the request doesn't contain cookies at all, sometimes it only contains one cookie key (I have multiple keys in my cookie). It looks like a bug in Chrome 80, unless they did it on purpose b/c they want to kill Flash for a long time.
I'm looking for a way to view the CORS pre-flight OPTIONS request when I make a CORS request. I wanted to see the server's response headers to help me debug a CORS issue I'm experiencing, but I couldn't find a a way to do this in Chrome or Firefox, in the Network tab or console of either.
I also installed the HTTP Header Live addon, and it didn't help.
I'm using jQuery.get(url); to trigger my CORS request, where url is a URL at a different domain.
I'm using jQuery.get(url); to trigger my CORS request
This will trigger a simple request without a preflight OPTIONS request.
You haven't fulfilled any of the conditions required to trigger a preflight.
Since a preflight isn't being made, none show up in the developer tools.
I have been using POSTMAN for sometime now for sending HTTP requests like GET, POST, PUT for RESTful Webservices. Recently came across a situation, when sending a request to my REST API through browser, I got a message that
No Access Control Allow Origin Header is present on the Requested resource.
The solution was ofcourse to add such an header to the API.
However strangely, When I sent the the same request through POSTMAN I was able to get back the response.
So I want to know how is sending a request through POSTMAN different from sending a request through browser.
I went through this question: CORS with POSTMAN, but it really doesn't provide an answer in detail.
From Cross-Origin XMLHttpRequest in Chrome Develop Extensions documentation:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
Basically browser extensions have more privileges than web content. In the case of Chrome extensions, there is an option to enable cross-origin access.
I was working on chrome extension with motive of intercepting all HTTP(S) requests/responses and log all headers into persistent file (on disk). I was almost close to my goal. But when I looked some requests closely, I found that in many requests "If-None-Match" and "If-Modified-Since" are missing in requestHeaders. Though, I can see them in Network panel displayed by the Developer Tools.
I tried hard to figure out any patterns, causing such behavior. But, unfortunately there is no such pattern.
Anybody please help.
The receive the list of requestHeader is necessary to use the onBeforeSendHeaders event from chrome.webRequest API.
In the onBeforeSendHeaders description is mentioned that some headers are not available for reading/processing:
Authorization
Cache-Control
Connection
Content-Length
Host
If-Modified-Since
If-None-Match
If-Range
Partial-Data
Pragma
Proxy-Authorization
Proxy-Connection
Transfer-Encoding
I'm afraid you will not be able to read or modify these headers, because it's an API forced limitation.