怎样让后台小哥哥快速对接你的前端页面

前言

首先需要澄清一下，该篇文章并非标题党。这里介绍需要实现的效果是让后台工作人员不需要前端改动网络请求基础地址的前提下，使用前端代码便于本地调试。

不好意思这里说的可能有点绕了，待我给你简单的说明一下你就明白了。

我们知道前端在对接后台的时候都有这么一个基础地址，所有的后台接口调用都是通过它：

let _baseURL = 'http://api.xxx.develop.com'
const service = axIOS.create({ // 创建 axios 实例
 baseURL: _baseURL, // api base_url
 timeout: 120000 // 请求超时时间
})
复制代码

现在假设有这么一个场景：

后台和前端一起开发某个需求，前端童鞋比较勤(huo)劳(shao)已经开发完页面并将代码都部署到了公司的开发环境http://xxx.develop.com上。

此时后台小哥哥A想找你对接接口，你会运行本地的前端项目，然后将配置中的_baseURL改为同事A的IP地址(假设为10.0.17.231:1001);

但同事B也开发完了想与你对接，你会怎么做？

“稍等一下哈，小张现在在和我对接”

“要不你先自己用postman自测一下你的接口？”

好为南啊，前端童鞋想做到雨露均沾啊，怎么办...

此时你多么希望能把你的前端项目当成一个静态的页面，让后台小哥哥只要配置上自己的IP地址就可以查看前端页面并进行本地调试，而不再需要前端开启服务。

该篇文章就是针对以上这种情况提供一种简单的方案，若还有更优的解决方案请评论区留言，一起学习一下

实现思路

1. 利用浏览器的Local Storage将后台的IP地址存储在其中;
2. 前端在网络请求代码层上做一些适配,判断Local Storage中是否有指定的IP地址,若是有的话则使用该地址。

前端网络请求适配

这里我以使用axios为例进行讲解，你的代码中可能存在这么一段东西：

// request.js
let _baseURL = 'http://api.xxx.develop.com'
const service = axios.create({ // 创建 axios 实例
 baseURL: _baseURL, // api base_url
 timeout: 120000, // 请求超时时间
 headers: { 'Content-Type': 'Application/json' }
})
...
复制代码

(request.js是项目中的网络请求配置)

我们只需要将baseURL做一个简单的适配就可以了,

定义一个setBaseURL的函数：

function setBaseURL () {
 const webHost = localStorage.getItem('webHost') // 获取浏览器本地存储中Key为webHost那一项的值
 if (location.origin === 'http://xxx.develop.com' && webHost) { // 判断当前的环境以及是否存在webHost
 _baseURL = 'http://' + webHost // 将_baseURL重新赋值
 }
 return _baseURL
}
复制代码

然后使用它：

// request.js
let _baseURL = 'http://api.xxx.develop.com'
function setBaseURL () {...}
const service = axios.create({ // 创建 axios 实例
 baseURL: setBaseURL(), // api base_url
 timeout: 120000, // 请求超时时间
 headers: { 'Content-Type': 'application/json' }
})
复制代码

这样项目在生成axios实例的时候，就会判断你当前的环境(假设你只想要在开发环境上这样做),然后判断浏览器的LocalStorage中有没有需要指定的IP地址，从而返回新的_baseURL。

做好了这层适配之后，前端就可以将项目build之后放到服务器上，后台小哥哥要使用的时候做一些配置就可以了。

注 这里的webHost字符串并非为固定写法，你也可以写成apiHost、host等等字段，只要和后台约定好就可以咯。

后台如何使用

后台小哥哥在使用的时候只需要在浏览器上配置一下就可以了。

假设前端项目放到的是http://xxx.develop.com上

1. 打开http://xxx.develop.com，并打开控制台(window快捷键F12, mac快捷键option＋command＋i);
2. 找到Application下的Local Storage;
3. 展开Local Storage, 找到当前网址的那一项;
4. 在右边添加Key为webHost, Value为后台本地的IP地址(包括端口号)的键值对。
5. 刷新一下页面

如下图：

配置完之后可能长这样：

注

1. webHost的拼写;
2. 填入的IP地址一定要带上端口号
3. 配置完之后刷新下页面
4. 该配置针对的只是你本机的浏览器
5. 不想要本地调试的时候记得将这项配置清除，不然它会一直存在于你的浏览器中
6. 若是想删除这项配置只需要将Value设置为空字符串, 或删除这一项，如下图

检测是否配置成功

检测是否配置成功只需要查看一下发送的网络请求的Request URL是否已经改变就可以了。

还是打开控制台，然后找到NetWork那一项，筛选一下只查看XHR的网络请求

假设原来应该请求的地址为http://api.xxx.develop.com

配置之后要请求的地址 10.0.17.231:1001

查看此时发起网络请求是不是你配置之后的地址即可。

后语

该解决方案是前公司的前端大哥提供的，我只是将它写成文章分享给大家，在这里也要感谢前端大哥在职业道路上对我的帮助。

觉得有帮助的小伙可以点个支持一下

作者：LinDaiDai_霖呆呆

来源：掘金