木灵鱼儿

木灵鱼儿

阅读：1481

最后更新：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  //是否为后端环境（服务器）
文章分类 nuxt
文章标签 axiosnuxt反代
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 0获得阅读 1481

版权申明

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

one
two
three

关于作者

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

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建

目录树