Third-party cookie will be blocked. Learn more in the Issues tab.

[near bronze]

I doing an app: headless CMS (astro + wordpress) and try setting render on demand because I don't wanna to rebuildin the whole app when user add sources to wordpress.

So I do the astro.config:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
 output: 'server', 
 adapter: node({
    mode: 'standalone'
 }),
});

And after this, when I launch the app it very slow and have this error in console log in devtools:
Third-party cookie will be blocked. Learn more in the Issues tab.
When I click on this issue I see:
No resource with given identifier found
The site will finally start but it is not acceptable to use this in production.

Anybody can help and explain me what happen? what I do wrong?

On every page file I import the asynchronous function from API which one doing fetch to download the content from Wordpress

for example for music.astro page

import { musicContent } from "../lib/api";
...
const data = await musicContent();

From API.js

[near bronze]

I check this error appears also in static mode (without that astro config)

[near bronze]

I found some infromation about this issue:
https://developers.google.com/privacy-sandbox/3pcd?hl=pl

https://developer.chrome.com/docs/devtools/application/cookies?hl=pl#3pc

https://developers.google.com/privacy-sandbox/blog/cookie-countdown-2023oct?hl=pl

https://web.dev/articles/samesite-cookie-recipes?hl=pl

I use youtube links to render video

for 2 ways:

1. in video element

2. in iframe element

I changing YouTubeIframeTemplate.js to:

export default function YouTubeIframeTemplate(link){
 // replace 'youtube.com' on 'youtube-nocookie.com' in link
 const noCookieLink = link.replace('youtube.com', 'youtube-nocookie.com');
 return `<iframe class="test" style="position:absolute;top:0;left:5%;width:90%;height:100%;" height="315" src="${noCookieLink}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
}

because I ask AI and it said me to modify the link to youtube-nocookie, but the error still apperars

[near bronze]

I try to dockerize astro app

https://docs.astro.build/pl/recipes/docker/#ssr

https://docs.astro.build/pl/recipes/docker/#recipe

I do exactly the same liki in this instructions

Dockerfile

FROM node:lts AS runtime
WORKDIR /app

COPY . .

RUN npm install
RUN npm run build

ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs`

docker build -t astro .

docker run -p 4321:4321 astro