轶哥

妄图改变世界的全栈程序员。

NuxtJS中Axios的配置说明

nuxt.js中使用axios,推荐使用nuxt定制款nuxt/axios(https://axios.nuxtjs.org/)。相比原生axios有如下优势:

  • 自动为客户端和服务器端设置baseURL
  • setToken函数暴露给$axios,可以非常容易的进行全局Authentication tokens设置
  • 基于baseURL发起请求时,自动启用withCredentials
  • 添加用于服务器端渲染的Proxy请求Header
  • 支持使用axios加载CSS
  • Nuxt进度条集成
  • Proxi模块集成
  • 使用axios-retry自动重试请求

对于@nuxt/axios的使用说明参考官网即可。此处对一些重点配置进行说明。

nuxt.config.js

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://127.0.0.1:4000', // 此处需要填写和privateRuntimeConfig相同的配置内容,方便服务器端请求
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL // 此处填写客户端请求API的地址
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: 'http://127.0.0.1:4000' // 此处填写在服务器端请求API的地址
    }
  },
}

在进行同构的时候,privateRuntimeConfig配置中的baseURL只有在服务器端请求才会生效,而browserBaseURL则是客户端请求的时候的baseURL地址。

例如,服务器中API服务器监听了4000端口,因此在服务器端,nuxt.js程序通过'http://127.0.0.1:4000'请求API,而客户端则通过https://域名请求API。

同理,在内网负载均衡环境下,privateRuntimeConfig配置中的baseURL则需要设置为内网请求地址,相应的browserBaseURL是外网地址。如果不这样设置,可能导致内网也通过外网域名进行API请求,甚至导致CDN循环回源而出现508错误。

打赏
交流区(2)
哄哄

从服务端发出的请求和从客户端发出的请求,使用相同的token,有解决方案吗?服务端发请求时怎么拿到token?

2020年12月20日 16:40回复
轶哥

从功能实现的角度说,是可以在服务器端请求API的时候,使用和客户端相同的Token的,可以通过建立cookie与token的映射关系,查找cookie对应的token来实现首屏的时候服务器端带token请求API。从功能设计的角度上,最好不要在服务器端带Token去请求API。使用Nuxt.js的通常目的是为了实现服务器和客户端同构,实现搜索引擎收录服务器端渲染的页面。因此需要进行服务器端渲染的页面跟用户权限没有必然关系,在设计API的时候就应当让需要鉴权的API使用客户端作请求。

2020年12月20日 16:49回复
尚未登陆
发布
  上一篇
下一篇 (适用于嵌入式设备的高性能PDF在线预览方案)  

评论回复提醒