木灵鱼儿
阅读:2096
nuxt 中axios反代的用法
具体的反代我其实在之前《nuxt 入坑的那些事》就说过了,这里就不多说,主要是讲下我们自己axios怎么处理反代。
在nuxt中我们其实可以自己封装一个axios模块来使用,也就是常见的后台管理项目中对aixos模块化的用法。
常常就是import引入axios,然后使用拦截器进行加工处理,然后在导出,使用的时候import这个axios。
import axios from "axios";
let api = axios.create({
baseURL: xxxxxx,
timeout: 15000,
});
//请求前
api.interceptors.request.use(...);
//请求后
api.interceptors.response.use(...);
export default api;
api模块
import api from "@/utils/request";
export const appDetail = (data) => {
return api({
url: 'xxxxx',
method: 'post',
data,
});
};
使用时:
import appDetail from "@/api";
appDetail().then().catch();
大概是这么一个流程。
在开发阶段,我们本地的测试域名localhost会与api的域名产生跨域,这让我们不得不使用反代来处理跨域的问题。
于是乎,当我们设置好反代后,尝尝是请求同域名下的/xxx地址段,假设为/api,那么我们baseUrl会设置为:
let api = axios.create({
baseURL: process.env.NODE_ENV === "development" ? "/api" : "xxxxxx",
timeout: 15000,
});
大概是这样,在开发环境api地址设为/api,这样表示在前端请求中,我们请求的是当前浏览器的域名+/api
。
但是,在nuxt中我们会遇到一个问题,就是nuxt在服务器端渲染时,他的域名和实际产生反代效果的域名不是一个东西。
有可能你服务器端他没有域名这个概念,他一般是一个ip地址段+端口,那么我们/api实际上在服务器端请求时,请求的地址就已经是错误的了。
这就导致请求是百分百失败的,并且还会提示什么80端口错误啥的。
网上的解决办法都是给一个完整的地址段,也就是固定死的。
let api = axios.create({
baseURL: process.env.NODE_ENV === "development" ? "http://192.168.3.133:3000/api" : "xxxxxx",
timeout: 15000,
});
类似于这种方案,用是能用,但是当我们电脑的ip地址发生变化时,这个地址也要跟着发生变化,太麻烦了,并不是一个很好的解决方案。
事实上我们要明白,在服务器端,是没有跨域这个概念的,所以,在服务器端的请求根本不需要反代,所以,我们可以这样:
let baseURL = "xxxxx";
if (process.env.NODE_ENV === "development" && process.client) {
baseURL = "/api"
}
let api = axios.create({
baseURL,
timeout: 15000,
});
这样就可以了,我们只需要判断,如果在开发模式,并且是前端请求,那么就使用反代,如果是后端请求,那么就使用原来的api地址请求,这样完美解决了每次电脑ip地址发生变化,都要改一次请求地址的问题。
这里主要就用到了两个nuxt的环境判断:
process.client //是否为前端环境(客户端)
process.server //是否为后端环境(服务器)
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
封装uni.request api为类似axios的用法
前言uniapp的请求都是通过uni.request的api实现的,但是这个api和前端常用的axios库用法上有着太多的不同了,移植起来非常痛苦,所以萌生了自己造一个轮子的想法,由于本人技术菜鸡,只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求,如下:axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });所以大体上都是围绕这种用法展开工作的。首先说下使用上...
Nginx默认不支持带下划线的头信息
前言最近国庆了,由于主要计划被迫放弃,所以只能走点次要计划,就是将个人全栈开发的书签系统移动到其它服务器上,主要还是因为财力问题,无法供给多台服务器,腾讯云也没有什么好活动,全是老用户与狗不得参与系列。无奈的搬运,其中最简单的是项目打包带走,数据库的还原,站点的配置,其中我就遇到了个贼奇葩的问题,就是我的头信息总是获取不到。一开始我是以为是我的反代服务的问题,因为是nodejs的后端服务,如果想要通过域名访问api就不得不通过反代的方式来使用。反代是将a的请求接受后自己再发给真实服务,然后将真实服务的返回再返回给a,其中我们知道一个xhr请求是有很多参数的,其中header头信息也是一种...

nuxt 加快编译速度
nuxt嘴上说很快,但是其实热编译是很慢的,很墨迹,和vue cli这种对比起来,差了很多,经常改动一点东西想要看效果,编译要等一段时间。今天无聊去看了下nuxt模块库,看到这么一个插件:nuxt-build-optimisations有点牛皮,使用后,热编译速度肉眼可见的提升,官方的介绍说可以提升2-5倍的速度,实际测试中,冷启动速度没太大感觉,但是热编译速度确实是很满意。特此推荐!用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

nuxt 一文读懂@nuxtjs/axios的用法
在nuxt中,有一个专门的axios版本:@nuxtjs/axios;但是由于nuxt的文档,或者说是资料不是很齐全(零散),初步了解后觉得这个插件并不是很方便,很多时候,我们都是模块化的axios写法,在使用@nuxtjs/axios时,会发现有点束手束脚,于是转而放弃使用,而是单独引入axios,然后一顿操作。当我们单独封装axios的时候,有没有这种想法:报错了能不能跳转到nuxt的错误页面?;但是实现时发现,除了在asyncData这些方法里面可以解构到error对象然后利用它跳转,好像在单独的一个js文件里面,没办法直接跳转。但是,如果我们使用@nuxtjs/axios,那么我...

nuxt mixins全局混入
全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个js文件里面,那是非常混乱的,所以我采用模块化的写法,其实就是导入导出而已,一种方式。具体用法和全局过滤器一样,创建插件,激活插件。在plugins目录下创建mixins文件夹,mixins里面创建一个index.js作为入口文件,然后再创建一个modules目录,用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...
nuxt filters全局过滤器
nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器,我们需要写一个插件,并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...
解决报错:Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.
这是一个奇葩的报错,因为他居然是因为模板vue文件没有设置name导致的。也就是说,如果要解决这个问题,在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content
出现这个问题,往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的,为什么会不同,举个例子:我们v-if判断客户端是否存在localstorage.getItem("token"),但实际上服务端永远不可能拿到,因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有,你浏览器上又有了,那不是就产生冲突了。于是就会报这个错,但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行,nuxt提供了一个自定义标签:client-only表示在这个标签内的内容,只有有客户端才会渲染运行,这样就可以让虚拟dom保持一致,且不...

nuxt 路由鉴权
由于nuxt无法配置路由信息,所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案,大概流程如下:创建一个路由中间件auth,用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时,auth进行判断:重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js:export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...
nuxt vuex持久化
老规矩,还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕,在plugins目录创建一个localStorage.js文件localStorage.js:import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { // ...