• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

nuxt 中axios反代的用法

226 0

具体的反代我其实在之前《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  //是否为后端环境(服务器)
0
  • 本文分类:nuxt
  • 本文标签:axiosnuxt反代
  • 流行热度:已超过 226 人围观了本文
  • 最后更新:2021年03月16日 - 11时45分54秒
  • 发布日期:2021年03月16日 - 11时45分54秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码