I'm new to React and I'm trying to serve some files from either my public folder or any remote URL. No matter where I request the images from, my browser always re-downloads same images over and over again. For example (though this applies to all images in my React app), I change something in my state that creates an image object with some src (just a regular <img src...>, nothing special). Then I do something that causes another image to load the same resource. Browser should normally serve the image immediately from cache, but it instead downloads the same image again. Here are the request/response headers for one of the images (but as I said it happens with all images regardless of them being served from localhost or a remote host):
Request URL: http://localhost:3000/images/content-icons/small/button-question#2x.png
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:3000
Response Headers:
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Connection: keep-alive
Content-Length: 479
Content-Type: image/png
Date: Sun, 01 Mar 2020 10:03:41 GMT
ETag: W/"1df-1707cbf1a8e"
Last-Modified: Tue, 25 Feb 2020 14:27:43 GMT
X-Powered-By: Express
Request Headers:
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
This problem is occuring on Chrome (v80) and I've triple-checked that Disable cache checkbox is not checked. Apparently, there's no problem with Safari; it caches and serves from memory correctly.
What is going on with Chrome and caching?
Related
My setup is the following:
(http://localhost:39500) ASP.NET Core backend
(http://localhost:3000) React frontend
I am sending an API request from my frontend to backend. The backend responds with a Set-Cookie header but the cookie is not being set in the browser.
Raw headers:
Response headers
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Vary: Origin
Server: Microsoft-IIS/10.0
Set-Cookie: PT=longstringhere; expires=Tue, 27 Sep 2022 04:56:03 GMT; path=/; httponly
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
X-Powered-By: ASP.NET
Date: Tue, 27 Sep 2022 03:56:03 GMT
Request headers
POST /account/login HTTP/1.1
Host: localhost:39500
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
content-type: application/json
credentials: include
Content-Length: 46
Origin: http://localhost:3000
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
When inspecting my browser cookie storage (Firefox and Chrome) I have no cookies being set, additionally no cookies are being sent to my backend as well.
Any ideas or pointers why this is happening?
Frontend and backend run at different hosts. Set-Cookie saves the cookie for the given host, i.e. localhost:39500, but your frontend sits at host localhost:3000. Try inspecting cookies for localhost:39500 (for example in Chrome>Settings>Cookies and other site data>See all cookies and site data or with Postman), you will see that there is a cookie set. In production, you could serve your frontend from your backend, which will both be the same host. You could also put your frontend or backend under a subdomain, which can also be set as a cookie. See here for more info: Share cookie between subdomain and domain
EDIT: For development, you can use a proxy (as described in https://create-react-app.dev/docs/proxying-api-requests-in-development/)
In my frontend I was including into my headers "credentials": "include" which is not the same as setting the credentials to include in fetch.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
There are a lot of issues like this, but I don't see any resolutions.
I had a VPS.
I set up my React build files on public_html root.
I have my Laravel setup on the same folder: public_html/casino/server/public
I am using Axios to process the request to Laravel endpoints.
PHP-FPM 7.4
Apache 2.4
Laravel 5.8
This is the Request Header:
POST /casino/server/public/sysman/login HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 154
Content-Type: application/json;charset=UTF-8
Cookie: CookieInfoScript=1
Host: ***.com
Origin: https://***.com
Referer: https://***.com/login
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
The Response Header: (as you can see content-length is 0)
HTTP/1.1 500 Internal Server Error
Date: Mon, 05 Sep 2022 02:50:18 GMT
Server: Apache
Access-Control-Allow-Origin: https://***.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Headers: x-xsrf-token, x-requested-with, Content-Type, origin, authorization, accept, client-security-token
Access-Control-Expose-Headers: Content-Security-Policy, Location
Access-Control-Max-Age: 600
Content-Type: text/html; charset=UTF-8
Content-Length: 0
Connection: close
To add GET Requests are being processed just fine.
I can also process the login request via Postman.
But of some reasons, not when coming from the React App.
No errors on BE, everything is running as expected.
Banging my head on this one for a few days already.
Can't seem to figure it all out.
Not much action on htaccess side.
The root online contains redirect to /login page.
Laravel public htaccess only contains the usual laravel stuff.
Apache Error Log:
[Sun Sep 04 22:50:18.527744 2022] [proxy_fcgi:error] [pid 21267:tid 47190394283776] [client 103.177.208.118:58353] malformed header from script 'index.php': Bad header: \x1f\x8b\b, referer: https://***.com/login [Sun Sep 04 22:50:18.527836 2022] [proxy_fcgi:error] [pid 21267:tid 47190394283776] [client 103.177.208.118:58353] AH01070: Error parsing script headers, referer: https://***.com/login [Sun Sep 04 22:50:18.527858 2022] [proxy_fcgi:error] [pid 21267:tid 47190394283776] (22)Invalid argument: [client 103.177.208.118:58353] AH01075: Error dispatching request to : , referer: https://***.com/login
Lastly, when running php artisan optimize, I am seeing Content type being outputted on console, can this be the issue?
[
I have a weird problem. I am testing this using Angular.js 1.2.15.
I want to send a POST request to a RESTful API backend on another domain (and I want to use $http directly, not $resource).
var mapData = {
'some': 'keys',
'other': 'keys'
}
$http.post(endPoint, mapData);
This is what happens: An OPTIONS request is sent first, with the following request headers:
OPTIONS /api/maps HTTP/1.1
Host: myhost.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://0.0.0.0:9000
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/36.0.1985.125 Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://0.0.0.0:9000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
The response clearly shows that requests from other origins and with every method are allowed:
HTTP/1.1 204 No content
Server: Varnish
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Max-Age: 0
Content-Type: text/plain charset=UTF-8
Accept-Ranges: bytes
Date: Tue, 02 Sep 2014 14:50:16 GMT
X-Varnish: 166874803
Age: 0
Via: 1.1 varnish
Connection: close
Cache-Control: max-age=0, private
X-Varnish-Cache: MISS
But then, the POST request is not even sent by the browser (Chromium 36), i.e. it does not show a POST request in the network tab of the dev console.
Instead, the following is shown in the console:
XMLHttpRequest cannot load http://myhost.com/api/maps. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:9000' is therefore not allowed access.
Now, what is totally weird: GET requests to the same API work, and are not preceded by an OPTIONS request (or maybe it is not shown in the network tab).
HTTP/1.1 304 Not Modified
Server: nginx/1.4.7
Content-Type: application/json; charset=utf-8
Status: 200 OK
X-UA-Compatible: IE=Edge,chrome=1
ETag: "baca3b7547fed3377088eb81fe083ff8"
X-Request-Id: b2552dc4fdef2541c841e3d5e12d337e
X-Runtime: 0.110003
X-Rack-Cache: miss
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Accept-Ranges: bytes
Date: Tue, 02 Sep 2014 14:54:31 GMT
X-Varnish: 166874831 166874142
Age: 6223
Via: 1.1 varnish
Connection: keep-alive
Cache-Control: max-age=0, private
X-Varnish-Cache: HIT
I really have no clue what the problem could be here. Is it Angular's implementation? Or is it a misconfiguration on the server? The guys responsible for the API told me it usually works with all their web apps.
I understand that this is a CORS problem and I am by no means an expert when it comes to that, but hey, Access-Control-Allow-Origin: * should do the trick, shouldn't it?
UPDATE: It works when using plain XMLHttpRequest:
var http = new XMLHttpRequest();
var url = endPoint;
var params = JSON.stringify(mapData);
http.open("POST", url, true);
I get a 200 back.
What is the matter here?
Nginx has to be compiled with http://nginx.org/en/docs/http/ngx_http_headers_module.html for Access-Control-Allow-Origin: * to work. Do you have this module installed?
location / {
add_header Access-Control-Allow-Origin *;
}
I've read that Chrome keeps asking for the favicon in each page it visits (link), and if it doesn't find it (404 Not found) then Chrome enters in a infinite loop.
I'm afraid that is happening to my app, although it works fine with Firefox or Safari. I haven't found a way to prevent this after go through all the forums I could find.
The http headers before the problematic request is:
GET /url?file_id=0B0orkZUr6JxAdmViVmNuTG5XbFU HTTP/1.1
Host: glinksapp.appspot.com:443
Accept: image/webp,*/*;q=0.8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: SID=DQAAAHABAACKf5HqkBRzvi3HwJrZJ1nW31wx9PEvsqASLQKFZts0Ux1pWFwk...[cut]
Referer: https://www.google.es/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36
X-Chrome-UMA-Enabled: 1
X-Chrome-Variations: COS1yQEIl7bJAQiptskBCMG2yQEIm4TKAQj4hMoBCLeFygEIwoXKAQjRhcoB
X-Purpose: Instant
HTTP/1.1 302 Found
content-length: 0
content-type: text/html
date: Sun, 14 Jul 2013 08:59:56 GMT
location: https://drive.google.com/#folders/0B0orkZUr6JxAVk9xT3QxcXBpdWs
server: Google Frontend
status: 302 Found
version: HTTP/1.1
And this is the infinite loop in Chrome:
GET /favicon.ico HTTP/1.1
Host: drive.google.com:443
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: NID=67=fwmd6KsM_Y0xNrRMQlSSpVVmsKTgAi8v4AlG9A...[cut]
PREF=ID=ad9194453b59885b:FF=0:LD=en:TM=1373791886:LM=1373792185...[cut]
SID=DQAAAHABAACKf5HqkBRzvi3HwJrZJ1nWZBxbrbYxeGjE4p130PeYTaQhalIhrt6T-...[cut]
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36
X-Chrome-UMA-Enabled: 1
X-Chrome-Variations: COS1yQEIl7bJAQiptskBCMG2yQEIm4TKAQj4hMoBCLeFygEIwoXKAQjRhcoB
HTTP/1.1 404 Not Found
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: gzip
content-length: 117
content-type: text/html; charset=UTF-8
date: Sun, 14 Jul 2013 08:59:56 GMT
expires: Fri, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
server: GSE
status: 404 Not Found
version: HTTP/1.1
x-chromium-appcache-fallback-override: disallow-fallback
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
If you refresh the page, the app comes out from the loop.
My Java app's url is http://glinksapp.appspot.com and is hosted in Google App Engine. It is a drive app to open link files (webloc, url...) directly in Google Drive (something not provided by Google by default).
The question is: how to avoid entering in the 404 'Not found' loop when the app tries to reach 'drive.google.com/favicon.ico'?
Thx in advance.
Chrome and other browsers automatically request the favicon, but they don't enter an infinite loop when they get a 404 (which happens on a lot of sites, so that would be a gigantic problem). The link you posted says that Chrome on Android may request the apple-touch-icon files as well, but that's okay.
The HTTP 404 response you've pasted into your question looks totally fine. Your 302 redirect also looks fine. So I suspect the problem you're experiencing is something else, not related to the favicon.
I'm using blobstore to serve audio files embedded in HTML5 audio element. Because I have a blobkey as a part of url I can assume that for any given url its content will never change. That looks like a perfect setup for caching.
Yesterday I implemented a solution which seemed to work. At least I remember that it worked ;). Unfortunately today I discovered, that it doesn't work with Chrome and production server. It works perfectly with Internet Explorer and Firefox. It even works with Chrome and development server - I use version 1.7.6. My solution uses Cache-Control headers, but it seems that only Firefox makes any use of it. Additionally I added an ETag header. When I discover If-None-Match request header with the same value I return 304 code. That seems to work with Internet Explorer. It also works with Chrome and development server. I remember that it had worked yesterday with Chrome and production, but I'm not completely sure. Anyway the problem I have is why both caching mechanisms are ignored by Chrome. I suspect that it may have something to do with chunked encoding which is generated only for chrome, but I don't understand why caching is disabled in that case
And now a lot of details.
Firefox
Initial request headers:
Host: eduzabawy.appspot.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language: pl,en-us;q=0.7,en;q=0.3
Range: bytes=0-
Referer: http://eduzabawy.appspot.com/dziecko/
Cookie: children="jEDor1B8VRDRJreWmUVlUQ\075\075"; session=eyJfc2lkIjoiWk91QmlsOEJlTEd4QVFuYVFiYkpsTyJ9|1365190508|81d81772f6f409dd57ad43a9f447f92d1b56d29e
Connection: keep-alive
Initial response headers:
HTTP/1.1 206 Partial Content
Cache-Control: public max-age=100000000
Content-Range: bytes 0-37249/37250
Content-Type: audio/ogg
Date: Fri, 05 Apr 2013 19:45:47 GMT
Etag: blobstore
Server: Google Frontend
X-Firefox-Spdy: 3
On subsequent loads it seems that Firefox doesn't even try to fetch the files. This is how I thought it should work.
Internet Explorer
Initial request headers:
Accept: */*
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Referer: http://eduzabawy.appspot.com/dziecko/
Accept-Language: pl-PL
Accept-Encoding: gzip, deflate
Host: eduzabawy.appspot.com
Connection: Keep-Alive
Cookie: children="WyzUQwHEzwX6qnjfn21KEw\075\075"; session=eyJfc2lkIjoia2VOd0llR0hvRHU1cUN0cE1QSWRpWCJ9|1365192921|f2279f82b21947c4d064dbf44a5ce9e1bd95cc0d
Initial response headers:
HTTP/1.1 200 OK
Cache-Control: public max-age=100000000
ETag: blobstore
Content-Type: audio/mpeg
Date: Fri, 05 Apr 2013 20:15:23 GMT
Server: Google Frontend
Content-Length: 4637
Subsequent request headers:
Accept: */*
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Referer: http://eduzabawy.appspot.com/dziecko/
Accept-Language: pl-PL
Accept-Encoding: gzip, deflate
Host: eduzabawy.appspot.com
If-None-Match: blobstore
Connection: Keep-Alive
Cookie: children="WyzUQwHEzwX6qnjfn21KEw\075\075"; session=eyJfc2lkIjoia2VOd0llR0hvRHU1cUN0cE1QSWRpWCJ9|1365192921|f2279f82b21947c4d064dbf44a5ce9e1bd95cc0d
Subsequent response headers:
HTTP/1.1 304 Not Modified
ETag: blobstore
Content-Type: audio/mpeg
Content-Length: 4637
Chrome + development server
Initial request headers:
Host: localhost:8080
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31
Accept: */*
Referer: http://localhost:8080/dziecko/
Accept-Language: pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.3
Cookie: children="xYNsqzfdtZ-2Z764lFSzk1Ed8-g1QoNlcaexsD79gSY\075"; session=eyJfc2lkIjoiTE9CZDc0SHJENHF4OWJua1J4S3dTQSJ9|1365192253|37815772acab0bf44a0c501ea0fd0dc7c617dd09
Range: bytes=0-
Initial response headers:
HTTP/1.1 206 Partial Content
etag: blobstore
cache-control: public max-age=100000000
content-type: audio/mpeg
Content-Range: bytes 0-4636/4637
Content-Length: 4637
Server: Development/2.0
Date: Fri, 05 Apr 2013 20:32:19 GMT
Subsequent request headers:
Host: localhost:8080
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31
Accept: */*
Referer: http://localhost:8080/dziecko/
Accept-Language: pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.3
Cookie: children="xYNsqzfdtZ-2Z764lFSzk1Ed8-g1QoNlcaexsD79gSY\075"; session=eyJfc2lkIjoiTE9CZDc0SHJENHF4OWJua1J4S3dTQSJ9|1365192253|37815772acab0bf44a0c501ea0fd0dc7c617dd09
Range: bytes=0-4636
If-None-Match: blobstore
Subsequent response headers:
HTTP/1.1 304 Not Modified
Content-Type: text/html
Server: Development/2.0
Date: Fri, 05 Apr 2013 20:33:08 GMT
Chrome + production server
Initial request headers:
Host: eduzabawy.appspot.com
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31
Accept: */*
Referer: http://eduzabawy.appspot.com/dziecko/
Accept-Language: pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.3
Cookie: children="sU9aqnqEf67eZFpS7BKSMw\075\075"; session=eyJfc2lkIjoieFlGWlJLMnRwSHJuOVFCb1haTnJLUCJ9|1365194193|2a13cd9eb7aceeb40c43bd82a763d893436d9f1f
Range: bytes=0-
Initial response headers:
HTTP/1.1 206 Partial Content
Cache-Control: public max-age=100000000
ETag: blobstore
Content-Type: audio/mpeg
Content-Range: bytes 0-4636/4637
Date: Fri, 05 Apr 2013 20:36:35 GMT
Server: Google Frontend
Transfer-Encoding: chunked
Subsequent requests and responses are the same as initial.
Your max-age seems too long and going over 3 years... I read from somewhere the maximum you should set in GAE is no more than 1 year.
Anyway, there's one more header you should try to set (Pragma: Public), which worked for me (I'm caching image from blobstore though, here's a few lines from my source code):
httpResponse.Header().Set("Cache-Control", "public, max-age=600")
httpResponse.Header().Set("Pragma", "Public")
blobstore.Send(httpResponse, project.ImageBlobKey)
By the way the above also cause Google to delivery your file from the edge cache, which really speed static resources up a lot!