Cannot get external images in NextJS with Custom server Express

Question

I'm developing NextJS app with custom server by ExpressJS, and the app cannot show external image, code example:

export function DocumentSection({content}) {
  return (
    <section className={styles.documentSection}>
      <div className={`${styles.container} container`}>
        <div className={styles.docNav}>

        </div>
        <img src='https://https://abc.xyz/example.png'/>
      </div>
    </section>
  );
};

Error: "GET https://abc.xyz/example.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200"

Everything work normally if I using only next dev

Answer 1

if you have helmet middleware on the server you should remove it or rather use these simple configuration.

server.use(helmet.crossOriginOpenerPolicy());
server.use(helmet.dnsPrefetchControl());
server.use(helmet.expectCt());
server.use(helmet.frameguard());
server.use(helmet.hsts());
server.use(helmet.ieNoOpen());
server.use(helmet.noSniff());
server.use(helmet.originAgentCluster());
server.use(helmet.permittedCrossDomainPolicies());
server.use(helmet.referrerPolicy());
server.use(helmet.xssFilter());
server.use(helmet.hidePoweredBy())