fix: attach client real ip

Author: Innei

src/app/(note-topic)/notes/(topic-detail)/topics/[slug]/layout.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
 import { QueryHydrate } from '~/components/common/QueryHydrate'
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { isShallowEqualArray } from '~/lib/_'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getQueryClient } from '~/lib/query-client.server'
 
 import { getTopicQuery } from './query'
@@ -14,7 +14,7 @@ export const generateMetadata = async (
     slug: string
   }>,
 ) => {
-  attachUA()
+  attachUAAndRealIp()
   const queryClient = getQueryClient()
 
   const query = getTopicQuery(props.params.slug)
@@ -30,7 +30,7 @@ export default async function Layout(
     slug: string
   }>,
 ) {
-  attachUA()
+  attachUAAndRealIp()
   const queryClient = getQueryClient()
   const query = getTopicQuery(props.params.slug)
   const queryKey = query.queryKey

src/app/(note-topic)/notes/topics/layout.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
 import { QueryHydrate } from '~/components/common/QueryHydrate'
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { isShallowEqualArray } from '~/lib/_'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getQueryClient } from '~/lib/query-client.server'
 
 import { topicsQuery } from './query'
@@ -18,7 +18,7 @@ export default async function Layout(
     slug: string
   }>,
 ) {
-  attachUA()
+  attachUAAndRealIp()
   const queryClient = getQueryClient()
 
   await queryClient.fetchQuery(topicsQuery)

src/app/(page-detail)/[slug]/layout.tsx

@@ -9,7 +9,7 @@ import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpT
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRootLazy } from '~/components/widgets/comment'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
@@ -32,7 +32,7 @@ export const generateMetadata = async ({
 }): Promise<Metadata> => {
   const { slug } = params
   try {
-    attachUA()
+    attachUAAndRealIp()
     const data = await getQueryClient().fetchQuery(queries.page.bySlug(slug))
     const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
@@ -67,7 +67,7 @@ interface PageParams {
 }
 
 export default async (props: NextPageParams<PageParams>) => {
-  attachUA()
+  attachUAAndRealIp()
   const {
     params: { slug },
   } = props

src/app/categories/[slug]/layout.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
 import { QueryHydrate } from '~/components/common/QueryHydrate'
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { isShallowEqualArray } from '~/lib/_'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getQueryClient } from '~/lib/query-client.server'
 
 import { getPageBySlugQuery } from './query'
@@ -14,7 +14,7 @@ export const generateMetadata = async (
     slug: string
   }>,
 ) => {
-  attachUA()
+  attachUAAndRealIp()
   const queryClient = getQueryClient()
 
   const query = getPageBySlugQuery(props.params.slug)
@@ -30,7 +30,7 @@ export default async function Layout(
     slug: string
   }>,
 ) {
-  attachUA()
+  attachUAAndRealIp()
   const queryClient = getQueryClient()
   const query = getPageBySlugQuery(props.params.slug)
   const queryKey = query.queryKey

src/app/layout.tsx

@@ -13,7 +13,7 @@ import { ScrollTop } from '~/components/common/ScrollTop'
 import { Root } from '~/components/layout/root/Root'
 import { SearchPanelWithHotKey } from '~/components/widgets/shared/SearchFAB'
 import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { sansFont, serifFont } from '~/lib/fonts'
 import { getQueryClient } from '~/lib/query-client.server'
 import { AggregationProvider } from '~/providers/root/aggregation-data-provider'
@@ -118,7 +118,7 @@ type Props = {
 }
 
 export default async function RootLayout(props: Props) {
-  attachUA()
+  attachUAAndRealIp()
   const { children } = props
 
   const queryClient = getQueryClient()

src/app/notes/[id]/layout.tsx

@@ -8,7 +8,7 @@ import { NoteFontSettingFab } from '~/components/widgets/note/NoteFontFab'
 import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { REQUEST_QUERY } from '~/constants/system'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
@@ -31,7 +31,7 @@ export const generateMetadata = async ({
   }
 }): Promise<Metadata> => {
   try {
-    attachUA()
+    attachUAAndRealIp()
     const { data } = await getQueryClient().fetchQuery(
       queries.note.byNid(params.id),
     )
@@ -68,7 +68,7 @@ export default async (
     id: string
   }>,
 ) => {
-  attachUA()
+  attachUAAndRealIp()
   const header = headers()
   const searchParams = new URLSearchParams(header.get(REQUEST_QUERY) || '')
   const id = props.params.id

src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -9,7 +9,7 @@ import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpT
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRootLazy } from '~/components/widgets/comment'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
@@ -26,7 +26,7 @@ export const generateMetadata = async ({
 }): Promise<Metadata> => {
   const { category, slug } = params
   try {
-    attachUA()
+    attachUAAndRealIp()
     const data = await getQueryClient().fetchQuery(
       queries.post.bySlug(category, slug),
     )
@@ -69,7 +69,7 @@ interface PageParams {
 }
 
 export default async (props: NextPageParams<PageParams>) => {
-  attachUA()
+  attachUAAndRealIp()
   const {
     params: { category, slug },
   } = props

src/app/timeline/layout.tsx

@@ -7,7 +7,7 @@ import { TimelineType } from '@mx-space/api-client'
 import { QueryHydrate } from '~/components/common/QueryHydrate'
 import { SearchFAB } from '~/components/widgets/shared/SearchFAB'
 import { REQUEST_QUERY } from '~/constants/system'
-import { attachUA } from '~/lib/attach-ua'
+import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { getQueryClient } from '~/lib/query-client.server'
 import { apiClient } from '~/lib/request'
 
@@ -16,7 +16,7 @@ export const metadata = {
 }
 
 export default async (props: NextPageParams<{}, PropsWithChildren>) => {
-  attachUA()
+  attachUAAndRealIp()
   const header = headers()
   const query = header.get(REQUEST_QUERY)
 

src/lib/attach-ua.ts

@@ -5,11 +5,18 @@ import { $axios } from '~/lib/request'
 
 import PKG from '../../package.json'
 
-export const attachUA = () => {
+export const attachUAAndRealIp = () => {
   if (!isServer) return
   const { get } = headers()
 
   const ua = get('user-agent')
+  const ip =
+    get('x-real-ip') ||
+    get('x-forwarded-for') ||
+    get('remote-addr') ||
+    get('cf-connecting-ip')
+  $axios.defaults.headers.common['X-Real-IP'] = ip
+  $axios.defaults.headers.common['X-Forwarded-For'] = ip
   $axios.defaults.headers.common[
     'User-Agent'
   ] = `${ua} NextJS/v${PKG.dependencies.next} ${PKG.name}/${PKG.version}`

src/lib/define-metadata.ts

@@ -6,7 +6,7 @@ import type { Metadata } from 'next'
 import { getQueryClient } from '~/lib/query-client.server'
 import { queries } from '~/queries/definition'
 
-import { attachUA } from './attach-ua'
+import { attachUAAndRealIp } from './attach-ua'
 
 export const defineMetadata = <T extends Record<string, string>>(
   fn: (
@@ -17,7 +17,7 @@ export const defineMetadata = <T extends Record<string, string>>(
   const handler = async ({ params }: { params: T }): Promise<Metadata> => {
     const getData = async () => {
       const queryClient = getQueryClient()
-      attachUA()
+      attachUAAndRealIp()
       return await queryClient.fetchQuery({
         ...queries.aggregation.root(),
       })