How to turn off README image caching

[weeebdev]

I wanted to write a server which gives me random image each time I GET it. Since I am a weeb, I wanted to add my favorite waifus in my profile. I wrote a server which redirects to random image at waifu.pics and built it on vercel. But I faced with a problem where README always caches images. According to this I set Cache-Control to no-cache, but it didn't help me.

[kidonng]

You should proxy the image instead of sending a redirect response (3xx). Just put these in your Vercel config:

{
  "routes": [{
    "src": "/(.*)",
    "dest": "https://waifu.pics/api/$1",
    "headers": { "cache-control": "no-cache" }
  }]
}

[weeebdev]

It breaks my server, because it can't find index.js
It was

"routes": [
        {
            "src": "/.*",
            "dest": "index.js",
            "headers": {
                "cache-control": "no-cache"
            }
        }
    ]

You should proxy the image instead of sending a redirect response (3xx). Just put these in your Vercel config:

{
  "routes": [{
    "src": "/(.*)",
    "dest": "https://waifu.pics/api/$1",
    "headers": { "cache-control": "no-cache" }
  }]
}

[kidonng]

I thought that API will return the image, but turns out it only gives the url. You may want to try this instead:

import got from 'got'

export default async ({ query }, response) => {
  const { url } = await got(`https://waifu.pics/api/${query.category}`).json()

  got
    .stream(url)
    .on('response', (response) => {
      response.headers['cache-control'] = 'no-cache'
    })
    .pipe(response)
}

[weeebdev]

@kidonng It caches it anyway😢
But now it doesn't redirect to somewhere else, it just shows in https://waifu.now.sh/kiss e.g. Thanks.
That's what curl -L -I waifu.now.sh/kiss shows

HTTP/1.1 308 Permanent Redirect
Date: Sat, 29 Aug 2020 09:47:45 GMT
Content-Type: text/plain
Connection: keep-alive
Location: https://waifu.now.sh/kiss
Refresh: 0;url=https://waifu.now.sh/kiss
server: Vercel
x-vercel-id: cdg1::8shgv-1598694465842-8de9dccdab7d

HTTP/2 200 
content-type: image/gif
cache-control: no-cache
x-powered-by: Express
access-control-allow-origin: *
cf-ray: 5ca55a419fd198a5-LAX
cf-request-id: 04db36bcfa000098a5f6ba9200000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
etag: "f88815fd60acb642622566fa6969ff5d"
date: Sat, 29 Aug 2020 09:47:46 GMT
server: Vercel
x-amz-request-id: tx04033e14275c4e55b21bc-005f4a235d
vary: Accept-Encoding
x-amz-id-2: tx04033e14275c4e55b21bc-005f4a235d
content-length: 0
x-amz-version-id: 1592553898356875
cf-cache-status: HIT
set-cookie: __cfduid=dc79cddc643e5978539a24259a4d573e81598694466; expires=Mon, 28-Sep-20 09:47:46 GMT; path=/; domain=.waifu.pics; HttpOnly; SameSite=Lax; Secure
age: 0
accept-ranges: bytes
last-modified: Fri, 19 Jun 2020 08:04:58 GMT
x-vercel-cache: MISS
x-vercel-id: cdg1::sfo1::gqm4m-1598694466371-d0345c46c576
strict-transport-security: max-age=63072000; includeSubDomains; preload

[weeebdev]

Got it. It actually works if caching is disabled in the browser. But browsers somehow don't cache the badges and readme-stats. Why?

[kidonng]

It actually works if caching is disabled in the browser.

You don't have to disable the cache. It's because even if you set no-cache, GitHub still caches the request (returns 304) for two Age rounds (which is reset one minute after the first request). I think that's enough.

But browsers somehow don't cache the badges and readme-stats.

I don't think it's the case.

[weeebdev]

Okay, if that, then I think my issue is solved. Thank you @kidonng