Next.js重写+服务器端Axios的自定义动态头

ycl3bljg 于 2023-08-04 发布在 iOS

关注(0)|答案(1)|浏览(182)

如何在服务端为axios做动态头？我想使城市的功能，而无需编辑nextjs文件夹结构. nextjs的Rewrities解决了我的问题，但我不能在服务器端为axios请求函数设置header。useRouter()钩子返回非代理路径。

// next.config.js

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

字符串
我尝试使用axios intreception函数：

// 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头？
我希望在axios拦截器示例中获得代理的url，正如我上面所展示的，但我得到了代理的路径。

axios

来源：https://stackoverflow.com/questions/74902896/next-js-rewrites-custom-dynamical-header-for-axios-on-the-server-side

1条答案

按热度按时间

093gszye1#

我不知道你说的中间件中“没有访问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) {
        ...
    })

型
这里是文档。
希望能帮上忙！

赞(0）回复(0）举报 2023-08-04

我来回答

Next.js重写+服务器端Axios的自定义动态头

1条答案

相关问题

热门标签

最新问答