木灵鱼儿

木灵鱼儿

阅读:852

最后更新:2021/03/16/ 11:45:54

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  //是否为后端环境(服务器)

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 852

相关文章

目录树