返回

再见卡顿，拥抱丝滑！手把手教你本地部署easy-mock，告别服务器拥堵！

前端

一、跨域的知识科普

跨域请求，是指浏览器限制从一个域名请求另一个域名的资源，例如，我们的后端接口在http://backend.example.com，而我们的前端应用在http://frontend.example.com，当前端应用向后端接口发送请求时，就会发生跨域请求错误。这是浏览器为了安全做出的限制，防止恶意网站窃取我们的数据。

要解决跨域问题，有几种方法，最简单的方法就是在后端设置允许跨域的HTTP头，允许前端应用跨域访问资源，或者，在前端使用CORS（Cross-Origin Resource Sharing）来跨域请求。

二、easy-mock简介

easy-mock是一个开源的接口模拟工具，它可以帮助我们快速地搭建一个模拟的后端环境，方便前端开发人员进行联调和测试。easy-mock提供了丰富的功能，包括接口模拟、数据生成、文档生成、团队协作等，深受开发人员的喜爱。

三、easy-mock本地部署教程

1. 安装Node.js

easy-mock是一个Node.js应用，因此，在部署之前，我们需要先安装Node.js。您可以从Node.js官网下载安装程序，或者使用以下命令在终端中安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装完成后，使用以下命令检查是否安装成功：

node -v

2. 安装easy-mock

使用以下命令在终端中安装easy-mock：

npm install -g easy-mock

3. 初始化easy-mock项目

在终端中切换到项目目录，然后运行以下命令初始化easy-mock项目：

easy-mock init

这将在当前目录下创建一个名为.easy-mock的文件夹，其中包含了easy-mock的配置文件。

4. 启动easy-mock服务

在终端中切换到.easy-mock文件夹，然后运行以下命令启动easy-mock服务：

easy-mock server

默认情况下，easy-mock服务将在3000端口上启动，您可以使用以下命令查看easy-mock的运行状态：

curl http://localhost:3000

5. 访问easy-mock

打开浏览器，访问http://localhost:3000，即可看到easy-mock的管理界面。在管理界面中，您可以创建和管理接口、数据和文档。

四、本地部署easy-mock遇到的坑

1. 跨域问题

在我本地部署easy-mock时，遇到了跨域问题。因为我的前端应用在http://localhost:8080上运行，而easy-mock服务在http://localhost:3000上运行，这会导致跨域请求错误。

要解决这个问题，我在easy-mock的配置文件中设置了允许跨域的HTTP头，具体如下：

{
  "server": {
    "port": 3000,
    "cors": {
      "origin": "http://localhost:8080"
    }
  }
}

2. 端口占用问题

在我本地部署easy-mock时，还遇到了端口占用问题。因为我的电脑上已经安装了其他占用3000端口的应用，导致easy-mock服务无法启动。

要解决这个问题，我修改了easy-mock的配置文件，将端口号改为其他未被占用的端口号，具体如下：

{
  "server": {
    "port": 3001,
    "cors": {
      "origin": "http://localhost:8080"
    }
  }
}

五、结语

通过本地部署easy-mock，我们可以获得更快的响应速度、更高的稳定性和更强的控制权。此外，还可以避免服务器拥堵，提高开发效率。

如果您遇到跨域或端口占用等问题，可以参考本文中的解决方法。如果您还有其他问题，欢迎随时与我联系。