不需要web服务器,如何构建一个可以内部跨域的http服务(Vue+Flask)

• 一个很老的项目，中游服务,webservice接口，需要测试，没有页面，需要我写一个小工具来测试,我准备用一个web来实现。

• 这个小工具其实类似测试工具，soup UI或者postman，需要实现以下功能：
  • 满足跨域请求，尽可能的轻量。
  • 满足发送xml和json作为报文请求
  • 可以做简单的自动化压力测试
  • 可以存储所有的的接口报文信息作为发送请求
  • 可以修改设置请求url，选择存在的url路径
  • 可以展示少量的请求报文和响应报文历史数据
  • 做好的工具不需要环境可以在机器上直接运行，类似windows上的*.exe

• 在技术上，涉及到的技术栈： Vue + Flask，主要是轻量
• 数据没有持久化，因为也没有多少数据，只是简单的使用
• 前后端分离的方式开发，打包方式:前端编译好直接放到后端的指定文件夹下,通过python的PyInstaller打包为exe
• 直接运行exe就会在window发布为一个服务。不需要部署。

• 前后端的整合
• 使用PyInstaller的打包问题
• 需要知道一点Vue和python.

人生两苦，想要却不得，拥有却失去。 ----- 烽火戏诸侯《雪中悍刀行》

这里不多讲,这是我的版本：

PS > npm -v
6.12.1
PS > node -v
v12.13.1
PS > vue  -V
3.7.0

PS > python -V
Python 3.9.0
PS > pip -V       
pip 20.2.3 from d:pythonpython310libsite-packagespip (python 3.9)
PS > PyInstaller -v
4.7

前端把需要测试的接口地址，报文通过axios 发送给后端Flask服务，Flask服务通过 requests 模块实现测试

后端很简单，需要注意的是，设置静态资源的加载路径，以及设置跨域

from flask import Flask, jsonify,request,render_template
from flask_cors import CORS  #跨域问题
import requests
import time


# configuration
DEBUG = True

# instantiate the app
app = Flask(__name__,static_folder = "./dist/static", template_folder = "./dist")
app.config.from_object(__name__)


# enable CORS
CORS(app, resources={r'
  padding: 0px;
  
  margin: 0px;
  
  height: 100%;
}

.el-select .el-input {
  width: 100%;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.main-up-class {
  width: 1000px;
}
.http-w {
  width: 20px;
}
.search-class {
  width: 1000px;
  height: 90px;
}
.search-class-up {
  margin: 10px;
  display: flex;
  justify-content: space-between;
}
.search-class-next {
  margin: 10px;
}
.active-class {
  margin: 10px;
}
.context-class {
  display: flex;
  justify-content: space-between;
  height: 405px;
}
.context-card-class {
  height: 100%;
  width: 100%;
  margin: 5px;
}
.el-card__header {
  padding: 5px 6px !important;
}
.el-card__body {
  padding: 1px !important;
}
.el-textarea__inner {
  resize: none !important;
}
.main-class {
  display: flex !important;
  justify-content: center !important;
  border-radius: 5px;

}
pre,
code {
  font-size: 0.85em;
  font-family: Consolas, Inconsolata, Courier, monospace;
}

code {
  margin: 0 0.15em;
  padding: 0 0.3em;
  white-space: pre-wrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
  display: inline; 
}

pre {
  font-size: 1em;
  line-height: 1em;
}

pre code {
  white-space: pre;
  overflow: auto; 
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 0.5em 0.7em;
  display: block !important; 
}


.markdown-here-wrapper[data-md-url*="wordpress."] code span {
  font: inherit;
}


.markdown-here-wrapper[data-md-url*="wordpress."] pre {
  background-color: transparent;
}
.input-with-select-add{
  display: flex !important;
  justify-content: center !important;
  margin: 10px;
}