Flask-CORS

AJAX跨域

• ajax请求中有一个同源(同一协议主机和端口)的规定，请求非同源时会出现跨域问题。

解决方案

• JSONP：需要前后端配合使用，稍显繁琐，不太推荐
• 授权方式：只需要在后端配置即可，比较简单，推荐使用

JSONP

• 前端代码

$('#jsonp').click(function(){
    $.getJSON('http://127.0.0.1:5000/jsonp/?callback=?', function(data){
        alert(data.username)
    })
})

• 后端代码

@app.route('/jsonp/')
def jsonp():
    import json
    # 提取方法名
    callback = request.args.get('callback')
    s = callback + '(' + json.dumps({'username': 'dahua'}) + ')'
    # print(s)
    return s

授权方式

• 原生实现

@app.route('/allow/')
def allow():
    resp = jsonify({'username': 'allow'})
    # 设置允许的请求源头，*表示任意源头
    # resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8848'
    return resp

@app.after_request
def after_request(resp):
    # 设置允许的请求源头，*表示任意源头
    # resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8848'
    # 授权允许源列表，可以实现允许多个源的的AJAX请求
    origins = ['http://127.0.0.1:8848', 'http://127.0.0.1:5000']
    origin = request.headers['Origin']
    if origin in origins:
        resp.headers['Access-Control-Allow-Origin'] = origin
    # 授权允许的跨域请求方法
    # resp.headers['Access-Control-Allow-Method'] = 'GET'
    return resp

• flask-cors：专门用来解决跨域问题的扩展

from flask_cors import CORS, cross_origin

# origins：针对所有的路由有效
# CORS(app, origins=['http://127.0.0.1:8848', 'http://127.0.0.1:5000'])

# resources：可以对路由进行分类限制
resources = {
    r'/api/*': {'origins': '*'},
    r'/allow/': {'origins': '*'}
}
CORS(app, resources=resources)

@app.route('/')
def index():
    return 'AJAX跨域测试'

@app.route('/allow/')
# 授权指定的请求源，默认为'*'，只针对当前路由有效
# @cross_origin(origins=['http://127.0.0.1:8848', 'http://127.0.0.1:5000'])
def allow():
    resp = jsonify({'username': 'allow'})
    # 设置允许的请求源头，*表示任意源头，只针对当前路由有效
    # resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8848'
    return resp

官方文档