使用 Nuxt auth 和 axios 时 Javascript 堆内存不足

Posted

技术标签:

【中文标题】使用 Nuxt auth 和 axios 时 Javascript 堆内存不足【英文标题】:Javascript heap out of memory when using Nuxt auth and axios 【发布时间】:2020-12-18 02:15:53 【问题描述】:

我正在尝试在使用快速服务器中间件的 Nuxt 应用中实现本地登录。

我正在使用以下模块

    nuxt 身份验证 axios 护照,本地护照,本地护照猫鼬,护照会话 快速会话

但是,一旦我在我的应用程序中设置了 nuxt auth,整个应用程序似乎停止响应。我无法访问我的应用程序的任何页面(甚至登录和注册页面)。 运行服务器一段时间后,这就是我所看到的。 https://i.stack.imgur.com/pl0Li.png

auth: 
redirect: 
  login: "/login", // User will be redirected to this path if login is required.
  home: "/", // User will be redirect to this path after login. (rewriteRedirects will rewrite this path)
  logout: "/login", // User will be redirected to this path if after logout, current route is protected.
  user: "/user",
  callback: "/",
,
strategies: 
  local: 
    endpoints: 
      login: 
        url: "/api/login",
        method: "post",
        propertyName: "token",
      ,
      logout:  url: "/api/logout", method: "post" ,
      user:  url: "/", method: "get", propertyName: "user" ,
    ,
    tokenRequired: true, //True by default
    tokenType: "bearer",
    // globalToken: true,
    // autoFetchUser: true
  ,
,

,

根据https://github.com/nuxt-community/auth-module/issues/286#issuecomment-461138282,向服务器中间件发出请求是否会导致此错误?

我应该有一个单独的 api 服务器吗?

【问题讨论】:

【参考方案1】:

我已经解决了我的问题。我在使用 nuxt-auth 时遇到了以下问题 https://github.com/nuxt-community/auth-module/issues/286 我的身份验证服务和 nuxt 在同一台服务器上,这导致 nuxt auth 模块进入无限循环(上面的链接中有更多详细信息)。 所以我为 API 服务和 s-s-r(nuxt) 创建了单独的服务器。

以下是我的nuxt-auth配置,差别不大。

  auth: 
redirect: 
  login: "/register", 
  home: "/", 
  logout: "/register",
  user: "/user",
  callback: "/",
,
strategies: 
  local: 
    endpoints: 
      login: 
        url: "/login",
        method: "post",
        propertyName: "token",
      ,
      logout:  url: "/logout", method: "post" ,
      user:  url: "/user", method: "get", propertyName: "user" ,
    ,
    tokenRequired: false, 
    tokenType: false, 
  ,
,

,

更重要的是,这是我的 axios 配置。请注意,我正在向其他服务器发出请求。

axios: 
baseURL: "http://localhost:5000/",
credentials: true,
init(axios) 
  axios.defaults.withCredentials = true;
,

,

现在与原始问题无关, 如果您从页面中间件发出 API 请求,还请确保发送了正确的 cookie。

查看此链接,https://github.com/nuxt/nuxt.js/issues/454 由于页面中间件可能在 s-s-r 中的服务器端执行,因此那里可能无法使用 cookie。有一些模块可以在服务器端使用 cookie。但取而代之的是,您可以将 API 请求放在在浏览器中执行的方法中,例如。创建、获取等。

对不起,我写这个答案很着急,我稍后会改进它。

【讨论】:

【参考方案2】:

我也面临同样的问题。就我而言,问题在于以下身份验证配置。它发生在 nuxt:2.14.3 的全新安装上,因此应该很容易重现该错误。只需添加此配置会使应用程序崩溃。 我正在使用@nuxt/auth-next:^5.0.0-1595976864.509d9d6

// nuxt.config.js
auth: 
    strategies: 
      cookie: 
        cookie: 
          name: 'session',
        ,
        endpoints: 
            login:  url: '/api/login', method: 'post' ,
            logout:  url: '/api/logout', method: 'post' 
        
      
    
 ,

【讨论】:

查看我对问题的回答,它可能会有所帮助。

以上是关于使用 Nuxt auth 和 axios 时 Javascript 堆内存不足的主要内容,如果未能解决你的问题,请参考以下文章

如何在 nuxt/axios 中设置 baseUrl?

如何在.onRequest拦截器中使用axios helper setToken

Nuxt 页面方法需要 js 方法

Nuxt-auth ..login 网络标头给了我奇怪的路径似乎是我登录页面的语言环境路径

如何让Nuxt-auth和Nuxt-i18n成为好友

NUXT.js 和 Axios 运行时如何避免代码重复?