- Dec 19, 2020 11:48 PM
- 教程
- 277
在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错误。

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

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




我也是某恩上面找的。你找找看嘛。有专用于贝壳云的。
老哥,openwrt用的哪个版本的,我的 kmod 里没有 rtl8153的驱动只有 8150 8152 。咋整
从功能实现的角度说,是可以在服务器端请求API的时候,使用和客户端相同的Token的,可以通过建立cookie与token的映射关系,查找cookie对应的token来实现首屏的时候服务器端带token请求API。从功能设计的角度上,最好不要在服务器端带Token去请求API。使用Nuxt.js的通常目的是为了实现服务器和客户端同构,实现搜索引擎收录服务器端渲染的页面。因此需要进行服务器端渲染的页面跟用户权限没有必然关系,在设计API的时候就应当让需要鉴权的API使用客户端作请求。
从服务端发出的请求和从客户端发出的请求,使用相同的token,有解决方案吗?服务端发请求时怎么拿到token?
嗯嗯,或许是这个原因。