flask manage port_Flask教程(十七)Flask跨域访问

软硬件环境

• windows 10 64bit
• anaconda3 with python 3.7
• pycharm 2020.1.2
• flask 1.1.2
• flask-restful 0.3.8
• flask-cors 3.0.8

什么是跨域？

跨域是指，浏览器从服务器A获取的静态资源，包括html、css、javascript，然后在javascript中通过ajax访问服务器B的静态资源或请求。

CORS

w3c组织制定了 [Cross Origin Resource Sharing](https://www.w3.org/TR/cors/) 的规范，简写为CORS，现在这个规范已经被大多数浏览器支持。

使用前一篇中的示例

from flask import Flask, jsonifyfrom flask_restful import Api, Resource, reqparseUSERS = [    {"name": "zhangsan"},    {"name": "lisi"},    {"name": "wangwu"},    {"name": "zhaoliu"}]class Users(Resource):    def get(self):        return jsonify(USERS)    def post(self):        args = reqparse.RequestParser() \            .add_argument('name', type=str, location='json', required=True, help="名字不能为空") \            .parse_args()        self.logger.debug(args)        if args['name'] not in USERS:            USERS.append({"name": args['name']})        return jsonify(USERS)app = Flask(__name__)api = Api(app, default_mediatype="application/json")api.add_resource(Users, '/users')app.run(host='0.0.0.0', port=5001, use_reloader=True, debug=True)

前端页面index.html

Click Me!    function jump(){        let xhr = new XMLHttpRequest();        xhr.open('GET', "http://192.168.1.210:5001/users", true);        xhr.send();        xhr.onreadystatechange = processRequest;        function processRequest(e) {            if (xhr.readyState == 4 && xhr.status == 200) {                let response = JSON.parse(xhr.responseText);                console.log(response)            }        }    }

我们将index.html部署在一台机器上(192.168.1.140)，flask应用部署在另一台机器上(192.168.1.210)，然后在浏览器中访问index.html，点击页面中的按钮，这时候就会报错了

flask-cors

flask配置cors

CORS需要在后端应用中进行配置。在flask中，可以使用扩展flask-cors，首先安装

pip install flask-cors

接下来来到manage.py，导入模块，并将flask应用包括起来就可以了，如下

from flask_cors import CORSapp = Flask(__name__)CORS(app)

重新启动应用，再次访问index.html，这时候，返回的结果就正常了

flask-cors

源码下载

https://github.com/xugaoxiang/FlaskTutorial

参考资料

• https://flask-cors.readthedocs.io/en/latest/