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