status 200 empty response

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 907 days ago, the information mentioned may be changed or developed.

https 环境, nextjs + i18next ，请求数据的时候会带上
Cookie: i18next=zh

经过 postman 测试，只要 header 中有 Cookie ，response_body 就为空；

如果把 Cookie 中 i18next 这个 key 的 path 属性改为/en （对应的 pathname ），就能拿到相应值。

请问 v2

Supplement 1 · Nov 15, 2023

如果 Cookie 中 i18next 的 path 属性为 /，response-body 也为空

Supplement 2 · Nov 15, 2023

后端是 spring boot 那一套（具体的我就不知道了）

i18next

header

Postman

14 replies • 2023-11-15 12:22:21 +08:00

ahhtree

Nov 15, 2023

请问 v2 上的各位大佬，有没有遇见过这种问题？如何解决的？（不小心点击了发送...。💦）

ahhtree

Nov 15, 2023

相应 -> 响应

NessajCN

Nov 15, 2023

你 i18next 咋配置的，用的 pages 还是 routes,服务端能不能打印，https 是 local-ssl 的还是 nginx 代理

ahhtree

Nov 15, 2023

@NessajCN i18n 主要是参考这篇文章配置的： https://locize.com/blog/next-app-dir-i18n/

ahhtree

Nov 15, 2023

@ahhtree 如果开启 i18n 中的 debug 服务端是可以打印的； https 使用的 nginx 进行代理

NessajCN

Nov 15, 2023

那你发一下 `app/[lng]/layout.js` 和 `app/i18n/settings.js`

NessajCN

Nov 15, 2023

app/[lng]/page.js 也要

ahhtree

Nov 15, 2023

layout:

<code>
export async function generateStaticParams() {
return Languages.map((lang) => ({ lang }));
}

export default async function RootLayout({
children,
params: { lang },
}: {
children: React.ReactNode;
params: { lang: LanguageType };
}) {
return (
<html lang={lang.includes("zh") ? "zh-CN" : "en-US"}>
<body className={inter.className}>
<main className="relative w-full h-screen flex flex-col">
<Header lang={lang} />
{/* <ContentWrapper childNodes={children} lang={lang} /> */}
<div className="relative grow w-full flex flex-col items-center justify-center">
{children}
</div>
<Toaster />
<Footer lang={lang} />
</main>
<InitRDKit />
</body>
</html>
);
}
</code>

settings:

<code>
export type LanguageType = "en" | "zh";
export const FallbackLng: LanguageType = "en";
export const Languages: LanguageType[] = [FallbackLng, "zh"];
export const CookieLocaleName = "i18next";
export const defaultNS = "home";

export function getOptions(lng: LanguageType = FallbackLng, ns = defaultNS) {
return {
debug: process.env.NODE_ENV === "development",
supportedLngs: Languages,
fallbackLng: FallbackLng,
lng,
fallbackNS: defaultNS,
defaultNS,
ns,
};
}
</code>

i18n 服务端配置：

<code>
const initI18next = async (lng: LanguageType, ns: string) => {
const i18nInstance = createInstance({});
await i18nInstance
.use(initReactI18next)
.use(
resourcesToBackend(
(language: string, namespace: string) =>
import(`./locales/${language}/${namespace}.json`)
)
)
.init({
...getOptions(lng, ns),
detection: {
order: ["path", "htmlTag", "navigator"],
// lookupCookies: "",
cookieOptions: {
sameSite: "lax",
path: `/${lng}`,
},
lookupCookie: CookieLocaleName,
caches: ["localStorage"],
excludeCacheFor: ["cookie"],
},
});
return i18nInstance;
};

export async function serverTranslation(
lng: LanguageType,
ns: string,
options = {}
) {
const i18nextInstance = await initI18next(lng, ns);
return {
t: i18nextInstance.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns),
i18n: i18nextInstance,
};
}

</code>

i18n 客户端配置：

<code>
const runsOnServerSide = typeof window === "undefined";

const languageDetector = new LanguageDetector();
languageDetector.init({ useCookies: false });

//
i18next
.use(initReactI18next)
.use(languageDetector)
.use(
resourcesToBackend(
(language: string, namespace: string) =>
import(`./locales/${language}/${namespace}.json`)
)
)
.init({
...getOptions(),
lng: undefined, // let detect the language on client side
preload: runsOnServerSide ? Languages : [],
detection: {
order: ["path", "htmlTag", "navigator"],
// lookupCookies: "",
cookieOptions: {
sameSite: "lax",
},
caches: ['localStorage'],
},
});

export function useTranslation(
lng: string,
ns: string,
options?: UseTranslationOptions<any>
) {
const [done, setDone] = useState(false);
const [cookies, setCookie] = useCookies([CookieLocaleName]);
const ret = useTranslationOrg(ns, options);
const { i18n } = ret;
if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
i18n.changeLanguage(lng);
} else {
// debugger
// eslint-disable-next-line react-hooks/rules-of-hooks
const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage);

// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
if (activeLng !== lng) {
setActiveLng(lng);
i18n.changeLanguage(lng);
}
}, [activeLng, lng, i18n]);

// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
if (cookies[CookieLocaleName] === lng) return;
setCookie(CookieLocaleName, lng, { sameSite: "lax", path: `/${lng}` });
}, [lng, cookies, setCookie]);

useEffect(() => {
setDone(true);
}, []);
}
return ret;
}

</code>

NessajCN

Nov 15, 2023

你的入口页 page.js 怎么写的

ahhtree

Nov 15, 2023

page：

export async function generateStaticParams() {
return Languages.map((lang) => ({ lang }));
}

export default function Page({
params: { lang },
}: {
params: { lang: LanguageType };
}) {
const router = useRouter();
const [values, setValues] = useState(["", ""]);
const setContentArray = useSearchContentArrayStore(
(state) => state.setContentArray
);

const handleSearch = useCallback(() => {
setContentArray(values);
router.push(
`/${lang}/search?value1=${encodeURIComponent(
values[0]
)}&value2=${encodeURIComponent(values[1])}`
);
}, [values, router, lang, setContentArray]);

return (
<div>
{/* <Bubbles /> */}

<SearchBar
isRow={false}
values={values}
setValues={setValues}
handleSearch={handleSearch}
/>
</div>
);
}

clue

Nov 15, 2023

nextjs 难道没有日志？

NessajCN

Nov 15, 2023

@ahhtree `./locales/zh/` 这个目录已经创建好了吗？

ahhtree

Nov 15, 2023

@NessajCN 是的，建好了； i18n\locales\en\xxx.json i18n\locales\zh\xxx.json 文件结构类似这种

ahhtree

Nov 15, 2023

@clue 额。。前端没有做日志，但是 nginx 有访问日志；对于同一个请求 nginx 有日志，后端却没有收到请求。