Some images are keep getting server-error: '"url" parameter is valid but upstream response is invalid'

[royjosefsson]

What example does this report relate to?

next/image

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome, Safari, Firefox

What operating system are you using?

Ubuntu 20.04.3 LTS

How are you deploying your application?

next start

Describe the Bug

Error in next/images:

I've noticed that Google Search Console has started reporting a lot of server error. Every server error is regarding my images as a matter of fact.

When accessing my image directly: internal image product in Jiroy, I'm keep getting:
'"url" parameter is valid but upstream response is invalid'.

If you go to the image externally: external image product in Jiroy, it works just fine.

The error only occures on the production server, locally it works just fine.
If i open node_modules/next/dist/server/image-optimizer.js locally and write:

const upstreamRes2 = await fetch(href);
console.log(upstreamRes2)

I'm getting:

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 5,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kTransformState)]: [Object]
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5ml.jpg',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

If I insted ssh to the server and edit node_modules/next/dist/server/image-optimizer.js and write:

const upstreamRes2 = await fetch(href);
console.log(upstreamRes2)

I'm getting:

Response {
    size: 0,
    timeout: 0,
    [Symbol(Body internals)]: {
        body: PassThrough {
        _readableState: [ReadableState],
        _events: [Object: null prototype],
        _eventsCount: 5,
        _maxListeners: undefined,
        _writableState: [WritableState],
        allowHalfOpen: true,
        [Symbol(kCapture)]: false,
        [Symbol(kTransformState)]: [Object]
        },
        disturbed: false,
        error: null
    },
    [Symbol(Response internals)]: {
        url: 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5m
        status: 503,
        statusText: 'Service Temporarily Unavailable',
        headers: Headers { [Symbol(map)]: [Object: null prototype] },
        counter: 0
    }
}

Expected Behavior

Response in server should be status 200

To Reproduce

Optimize https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5ml.jpg with next/image and host on server.
Go to https://<YOUR_DOMAIN>/_next/image?url=https%3A%2F%2Fmedia.meds.se%2Fmeds%2Fimages%2Fmaxx-27397425-g-2019-11-13-111615299%2F455%2F360%2F0%2Fdr-hauschka-lip-balm-4-5ml.jpg&w=1200&q=80

Complementary

I've set up a "proof of consept" and excluded the possibility that media.meds.se is blocking https://jiroy.com/ by setting up two new servers.
This is my code: https://github.com/royjosefsson/error-in-next-image/

The image from media.meds.se is working completely fine in:

• https://error-in-next-image.vercel.app/

But not in this newly bought domain:

• https://jiroi.com/

[balazsorban44]

It sounds like your image source blocks requests from your domain. Could you verify this is not the case?

Have you also added the media.meds.se in your next.config.js file?

https://nextjs.org/docs/api-reference/next/image#domains

[royjosefsson]

It sounds like your image source blocks requests from your domain. Could you verify this is not the case?

Have you also added the media.meds.se in your next.config.js file?

https://nextjs.org/docs/api-reference/next/image#domains

Yes. This is also the case in my stage envirement which has a completely different domain.
Yes, "media.meds.se" is included in next.config.js

[balazsorban44]

I noticed on the second log, you have

url: 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5m

which seems to be an incorrect URL. In fact, visiting it gives a 5xx response. Any idea why that URL would be cut in production?

Can I also ask where you are hosting your site? I tried deploying it to Vercel just to test, and the image seems to work fine: https://32696-e7hbkw5yc-balazsorban.vercel.app/ I see you added an example in your description as well.

It still sounds like your production requests are being blocked by the image hosting service.

[royjosefsson]

I noticed on the second log, you have

url: 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5m

which seems to be an incorrect URL. In fact, visiting it gives a 5xx response. Any idea why that URL would be cut in production?

Can I also ask where you are hosting your site? I tried deploying it to Vercel just to test, and the image seems to work fine: https://32696-e7hbkw5yc-balazsorban.vercel.app/ I see you added an example in your description as well.

It still sounds like your production requests are being blocked by the image hosting service.

I must have wrote a typo, sorry about that.

Both https://jiroy.com and https://jiroi.com are hosted on Digital Ocean.
Could this have something to do with image-optimization, because when I disable optimization on these sites, images from meds.se are working just fine?:

• https://jiroy.com/butik/meds/
• https://jiroi.com/

[styfle]

It's probably not a domain being blocked since the upstream server wouldn't know the domain name.

It's likely the IP address being blocked.

You can verify by running a fetch request from your current server to the upstream image:

// api/test.js
const url = 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5ml.jpg'

export default function handler(req, res) {
  fetch(url).then(r => console.log('status', r.status)).catch(e => console.error('error', e))
  res.end('check server logs')
}

[royjosefsson]

It's probably not a domain being blocked since the upstream server wouldn't know the domain name.

It's likely the IP address being blocked.

You can verify by running a fetch request from your current server to the upstream image:

// api/test.js
const url = 'https://media.meds.se/meds/images/maxx-27397425-g-2019-11-13-111615299/455/360/0/dr-hauschka-lip-balm-4-5ml.jpg'

export default function handler(req, res) {
  fetch(url).then(r => console.log('status', r.status)).catch(e => console.error('error', e))
  res.end('check server logs')
}

You're right, I'm getting "status 503".
Could it be that the IP address is being blocked, even if it's completely new?
Are there any solution for this, should I maybe introduce a third-party for image-optimization to solve this issue?

[balazsorban44]

If you are getting this issue outside of using next/image, it is not a Next.js specific issue then. I'll transfer this to discussions. 🙏

[royjosefsson]

@balazsorban44
I have a potential solution idea which might make Google happy.
What if url parameter is valid but upstream response is invalid, then return unoptimized image?

look at file:
node_modules\next\dist\server\image-optimizer.js
row:

• 224
• 289

[CodeAunt]

I'm getting this error from URLs of certain domains.
If I use <Image /> from next/image with unoptimized: true, these images failed to load sometimes.
But when I used the <img /> tag alternatively, the images loaded just fine.

[royjosefsson]

Which error message are you getting?