Next.js перезаписывает + настраиваемый динамический заголовок для аксиом на стороне сервера

Question

Как я могу сделать динамический заголовок для аксиом на стороне подачи? Я хочу сделать функциональность городов без редактирования структуры папок nextjs.Rewritiesfrom nextjs решает мою проблему, но я не могу установить заголовок для функций запроса axios на стороне сервера.useRouter()hook возвращает путь без прокси.

      // next.config.js

...
async Rewrites() {
  return [
    {
      source: '/new-york/:path*',
      destination: '/:path*',
    },
  ]
}
...

Я попытался использовать функцию перехвата axios:

      // destination _app.js

export default function AxiosInterceptors() {
...
    const router = useRouter();
    const asPath = router.asPath; // asPath return not non-proxied path, if i use url /new-york/blogs, here i see /blogs;

    apiQr.interceptors.request.use(function (config) {
        config.headers['city'] = asPath.includes('/new-york') ? '2' : '1'; // city id
        return config;
    }, function (error) {
        return Promise.reject(error);
    });
...

}

Я также пробовал устанавливать заголовки из NextJS._middleware.jsно доступа к запросам axios нет и функция перехватчика axios там не вызывается. Где и как я могу получить стабильную переменную в зависимости от введенного URL-адреса на стороне сервера, чтобы я мог настроить заголовки axios?

Я ожидаю получить проксируемый URL-адрес в экземпляре перехватчиков axios, как показано выше, но я получаю проксируемый путь.

Answer 1

Я не уверен, что именно вы подразумеваете под «нет доступа к запросу axios» в промежуточном программном обеспечении, но вот что сработало для меня:

      // middleware.ts
export async function middleware(req: NextRequest) {
  const {pathname, host, protocol, port} = req.nextUrl;
  if (pathname.startsWith("/some/url")) 
    // here you can access some headers from your axios request 
    const user = req.headers.get('x-username')
    // ... some logic depending on what headers you set in your original request
       
    const rewriteUrl = req.nextUrl.clone();
    const url = new URL("https://another.host/some/url");
    
    rewriteUrl.host = url.host
    rewriteUrl.protocol = url.protocol;
    rewriteUrl.port = url.port;

    const newHeaders = new Headers(req.headers)

    // I needed to delete the old headers:
    newHeaders.forEach((_, headerName) => {
      req.headers.delete(headerName);
    });

    // And here we can set the new ones:
    newHeaders.set("Authorization", "forExampleBasicuthBase64HashForAnotherHost")
    newHeaders.set("Content-Type", "application/json; charset=utf-8")

    const response = NextResponse.rewrite(rewriteUrl, {
      request: {
        headers: newHeaders,
      },
    })

    return response
}

И вы можете передавать пользовательские заголовки как переменные при отправке запроса axios следующим образом:

      axios({
    method: "post",
    url: "/some/url",

    ....

    headers: {
        'x-username': someUserNameOrAnotherVariable,
    },
        
    }).catch(function (error) {
        ...
    })

Вот документация.

Надеюсь, поможет!