vue+flask前后端分离项目（2）

这是总结第二篇，总结flask项目搭建，restful接口设计，以及返回结果中添加允许跨域头。

flask搭建server端

本项目采用python3环境，使用pip3安装依赖包。
如果直接用命令行生成flask项目，可以使用以下命令：

1
2
3
mkdir myProject
cd myProject
pip3 install flask

定义restful接口返回

将response定义为如下格式的返回结果，其中code=0代表成功，msg由server端自定义返回结果的文字描述，data中为需要回传给客户端的内容，定义为json格式。

1
2
3
4
5
6
7
8
9
10
11
from flask import jsonify
@app.route('/api/upload', methods=['POST'])
def upload():
    res = jsonify({
        'code': 0,
        'msg': 'ok',
        'data': { 
            'text': '这里是返回结果'
        }
    })
    return res

我的前端请求使用的是formData格式，需要将请求变为字典格式后用key-value进行取值，遇到file形式的数据则直接使用request.files['file']进行取值。

1
2
3
4
5
from flask import request

data = request.form.to_dict()
username = data.get('username')
file = request.files['file']

flask中允许跨域

在返回结果中允许跨域需要使用flask_cors：

1
pip3 install flask-cors

server端添加如下代码：

1
2
3
4
5
6
7
from flask_cors import *
app = Flask(__name__)
CORS(app, resources=r'/*')

res.headers['Access-Control-Allow-Origin'] = '*'
res.headers['Access-Control-Allow-Methods'] = 'POST,GET,OPTIONS'
res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'

跨域小结

在（1）中已经总结了在开发环境中绕过跨域限制，现在对跨域作一个小结。
跨域是指从一个域名的网页去请求另一个域名的资，更加严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
经过测试，确实是只要server添加头信息，不管我是本地起的服务还是其他http服务，都能和接口顺利通信。

附录：
跨域资源共享 CORS 详解