1、后端服务器环境说明
[root@openshift flask]# python -V
Python 3.6.3 :: Anaconda, Inc.
[root@openshift flask]# cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)
[root@openshift flask]#
2、Flask服务
2.1安装Flask服务，请自行安装。
2.2配置flask服务
[root@openshift flask]# more app.py
#coding:utf8
from flask import Flask,jsonify
from flask import abort
from flask import make_response
from flask import request
from flask_cors import cross_origin
app = Flask(__name__)
jobs = [
{
'id': 1,
'post': u'运维工程师',
'level':'professor'
},
{
'id': 2,
'post': '产品经理',
'level':'primary'
}
]
@app.route('/todo/api/v1.0/tasks', methods=['GET'])
@cross_origin()
def get_tasks():
return jsonify({'jobs':jobs})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
@cross_origin()
def get_task(task_id):
task = filter(lambda t: t['id'] == task_id, jobs)
#print (list(task))
task = list(task)
if len(task) == 0:
abort(404)
return jsonify({'task': task})
if __name__ == '__main__':
app.run(debug=True,host='172.16.16.71',port=5000)
2.3启动Flask服务
[root@openshift flask]# python app.py
* Running on http://172.16.16.71:5000/ (Press CTRL+C to quit)
* Restarting with sta
2.4文件内容阐述
这里主要阐述vue2.0通过axios调用接口出现跨越问题。
pip install flask-cors 安装
from flask_cors import cross_origin 导入
@cross_origin() 引用使用
3、测试接口
3.1浏览器测试，正常访问
3.2 vue2.0通过axios调用接口，无跨越问题
3.2.1 Vue项目文件配置，App.vue配置
<template>
<div>
<div v-if="!post">loading</div>
<div v-else>
<B>工作岗位：</B><br/>
级别： {{ level }} <br/>
岗位： {{ post }}
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
level: '',
post: '',
}
},
mounted () {
const url = `http://172.16.16.71:5000/todo/api/v1.0/tasks`
axios.get(url).then(response => {
const result = response.data
const repoRepo = result.jobs[0]
this.post = repoRepo.post
this.level = repoRepo.level
}).catch(error => {
alert('请求失败了')
})
}
}
</script>
<style>
</style>
3.2.2 Vue测试结果
如下，正常调用Flask后端数据。
$ npm run dev 启动vue服务
自此，vue2.0通过axios实现了对Flask restful的数据调用。