时间戳

首页 > 解决方案 > Axios 实例不适用于 Nextjs：'Localstorage 未定义'

javascript - Axios 实例不适用于 Nextjs：'Localstorage 未定义'

问题描述

我有一个反应应用程序。

我有一个要重用的 axios 组件：

import axios from 'axios'
import dynamic from 'next/dynamic'    
const baseUrl = 'http://127.0.0.1:8000/'

const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {
        Authorization: localStorage.getItem('access_token')
        ? 'Bearer ' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }
})

export default axiosInstance

现在，我尝试将其导入我的注册页面，如下所示：

import axiosInstance from "axiosInstance"

文件本身如下所示：

const handleFormSubmit = async (values: any) => {
    axiosInstance.post(`account/register/`, {
      username: values.username,
      email: values.email,
      password: values.password,
      confirm_password: values.confirm_password,
    }).then((response) => {
      console.log(response);
    });

    // router.push('/profile')
    console.log(values);
  };

但是，这会引发错误：

在此处输入图像描述

有人可以帮我解决这个问题吗？我是 Nextjs 的新手，看了看

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

但不确定如何在这种情况下使用它。

标签： javascriptreactjsaxiosnext.jsserver-side-rendering

解决方案

localStorage是window对象的属性，并且由于 next.js 是服务器端渲染框架，当 next 在服务器上渲染组件时，window.localStorage将是未定义的。

为了导入它，像这样设置 axios 实例：

const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {
        // if localStorage is not defined, it wont throw error
        Authorization:localStorage && localStorage.getItem('access_token')
        ? 'Bearer ' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }
})

然后在里面

推荐阅读