Nuxt 中间件或 nuxtServerInit() 操作中的 axios 本地 API 调用仅在服务器端返回 404 错误

Question

每次在我的应用程序中首次加载页面时，它都会对以下 URL 进行 API 调用：auth/verify。该调用工作正常客户端，但返回一个404错误服务器端（即当用户重新加载页面时）。一种似乎可行的替代方法是更改​​ url 配置，如下所示

url: process.browser ? 'auth/verify' : 'http://localhost:3000/auth/verify'

这在开发过程中运行良好，但在生产中导致服务器错误。下面是我的代码：

this.$axios({
  method: 'post',
  url: 'auth/verify',
  data: {
    token: authToken
  }
}).then((response) => {
  console.log(response.data)
}).catch(err => {
  console.log(err.response.data)
})

解决此问题的最佳方法是什么？

注意：我在 Linux 服务器上托管我的节点应用程序。以下是我的 nuxt.config.js 文件中的一些配置：

router: {
  middleware: "auth" /* The middleware making the api call */
},
mode: "universal",
axios: {
  baseURL: "/",
  proxy: true
},
server: {
  host: "0.0.0.0",
  port: 3000
}

Answer 1

我使用here 记录的选项解决了这个问题（在帮助下！）：

  publicRuntimeConfig: {
    axios: {
      baseURL: `http://localhost:${process.env.PORT || '3000'}/`, // server
      browserBaseURL: '/', // client / browser
    }
  },

它是如何工作的：

• 服务器：使用http://localhost + port（Azure 提供的8080，或开发中的默认3000）
• 客户端：在 URL 中使用 protocol 和 domain

我的 nuxt.config.js 中什至没有 axios 节点 - 这就是我的 Axios 配置的全部。

我的设置是：

• 快递后端运行在server/index.js
• /api/ 的本地 API
• 在渲染页面之前使用nuxtServerInit() 获取数据

部署：

• 在 Azure 上运行
• 身份验证后

脚本：

• 构建命令：npm run generate
• 启动命令：npm run start

而且效果很好……经过几天的折腾并解决了所有问题。

Answer 2

我的用于用户持久性的 nuxt 中间件函数也有类似的问题。如果您不返回承诺或使用异步等待，nuxt 服务器将创建和呈现请求的页面，而不考虑您的外部 api 响应。

例如：这里我有一个同步函数，它利用 axios 承诺来设置 vuex 数据。 您必须返回 axios 承诺。

export default function (context) {
        console.log('Persistence Middleware');
        // No need for request, we have a user object
        if (context.store.state.user) {
            return;
        }

        let token;

        if (process.server) {
            console.log('Persistence Server');
            const headers = context.req.headers.cookie;    
            if (!headers) {
                return;
            }
            token = headers.split('=')[0] === 'token' ? headers.split('=')[1] : null;
        }

        if (process.client) {
            console.log('Persistence Client');
            token = getCookie('token');
        }

        if (token) {
            console.log('Persistence Token', token);
              
            context.$axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
            return context.$axios.$get('/api/v1/userprofile/me')
                .then(res => {

                    console.log({ res }, 'middleware res');
                    context.store.commit('setUser', res);
                 
                })
                .catch(err => {
                    console.log({ err }, 'middleware err');
                });
        }
}

这里我使用 async/await 而不返回。

export default async function (context) {
    try {
        console.log('Persistence Middleware');
        // No need for request, we have a user object
        if (context.store.state.user) {
            return;
        }

        let token;

        if (process.server) {
            console.log('Persistence Server');
            const headers = context.req.headers.cookie;
            if (!headers) {
                return;
            }
            token = headers.split('=')[0] === 'token' ? headers.split('=')[1] : null;
        }

        if (process.client) {
            console.log('Persistence Client');
            token = getCookie('token');
        }

        if (token) {
            context.$axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

            const res = await context.$axios.$get('/api/v1/userprofile/me');
            context.store.commit('setUserData', res);
            console.log(res, 'middleware res');
        }

    } catch (error) {
        console.log({ error }, 'middleware error');
    }
}