木灵鱼儿

木灵鱼儿

阅读：1845

最后更新：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反代
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1845

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树