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

前言

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

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

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

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

查看此时发起网络请求是否是你配置以后的地址便可。

后语

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

以为有帮助的小伙能够点个👍支持一下 😊

知识无价，支持原创

更多推荐：

• 适合初学者的TCP讲解
• ES9已经来了 Are you ready?
• 微信小程序使用多色图标详解