vue-cli项目前后端分离数据交互之ajax和后台python通信flask，web服务器 wampserver和flask兼容！！

本文主要是介绍vue-cli项目前后端分离数据交互之ajax和后台python通信flask，web服务器 wampserver和flask兼容！！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

帖子解决两个问题：
第一、ajax发出请求后端用flask轻量化部署，包括websocket通信
第二、web服务器部署集成环境wamrserver和flask冲突(具体表现在:ajax中的请求会默认wamp不会指向flask)

先解决第一个问题：

用vue-cli 创建项目后配置下项目的配置文件，config/index.js 找到proxyTable，配置如下：

亲测有效的方法
proxyTable: {'/api/*':{ //这里面的  '/api/*' 才好用， 其他的形式如：'/api'不失败的target:'http://xxxx.com;8011',changeOrigin: true,//跨域（很重要，前后端分离时所在服务器ip不同会涉及到跨域的问题）pathRewrite: {'^/api': '/api'  // 这里的/api 会替代http://xxxx.com， 具体前端请求例子往下看}}//这里设置的请求用/api替代，所以后台flask中的请求地址也应该是/api开头（必须这样否则请求不成功）

后台先配置下flask,如下代码，保存到.py文件后在cmd中python run.py运行，会启动flask服务

其中@app.route(’/api/aa/hello_world’,methods=[‘GET’,‘POST’]) 和@app.route(’/api/sendAjax2’, methods=[‘POST’])中带请求地址必须都以/api开头同config/index.js 里的proxyTable设置中保持一致，

待请求中的最后面hello_world和sendAjax2是后台对应的方法，待请求结尾必须以方法名结尾，表示调用该方法。

from flask import Flask
from flask import request
import json
app = Flask(__name__) 
@app.route('/api/aa/hello_world',methods=['GET','POST'])//待请求的地址以/api开头
def hello_world(): data =  request.form.get("data")//接收前端传过来的参数print(data)return (data)@app.route('/api/sendAjax2', methods=['POST'])/待请求的地址以/api开头
def sendAjax2():return "46575"
#接收前端上传的真实设备xlsx文件
@app.route('/api/upload_xlsx', methods=['POST'])
def upload_xlsx(): f = request.files['file']filename = f.filenameupload_file = request.files['file']upload_file.save('{}/{}'.format(os.getcwd(), filename))os.rename('{}/{}'.format(os.getcwd(), filename), '{}/{}'.format(os.getcwd(), 'Device.xlsx'))#重命名return '{}/{}'.format(