flask—— flask-cors 解决跨域问题

CORS的全称是Cross-Origin Resource Sharing  ，有w3c组织制定的，现在这个规范，已经被大多数浏览器支持，处理跨域的需求。

CORS需要后端应用进行配置，因此，这是一种后端跨域的配置方式，这种方式很容易理解，一个陌生的请求来访问你的服务器，自然需要进行授权。。。（关于前端在vue中跨域的配置在下一篇文章介绍！）

1、安装flask-cors 包

pip install -U flask-cors 

 

2、从flask_cors模块中引入类 CORS ：

from flask_cors import CORS 

 

3、flask 配置跨域 Cors有两种方式（还有一种方式最后讲）：

（1）使用CORS类 （适用于全局的api接口配置，也就是所有的路由都支持跨域了）

from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
cors = CORS(app)

下边的表格是CORS类的第二个参数的配置：

参数	类型	Head字段	说明
resources	字典、迭代器或字符串	无	全局配置允许跨域的API接口
origins	列表、字符串或正则表达式	Access-Control-Allow-Origin	配置允许跨域访问的源， *表示全部允许
methods	列表、字符串	Access-Control-Allow-Methods	配置跨域支持的请求方式， 如：GET、POST
expose_headers	列表、字符串	Access-Control-Expose-Headers	自定义请求响应的Head信息
allow_headers	列表、字符串或正则表达式	Access-Control-Request-Headers	配置允许跨域的请求头
supports_credentials	布尔值	Access-Control-Allow-Credentials	是否允许请求发送cookie， false是不允许
max_age	整数、字符串	Access-Control-Max-Age	预检请求的有效时长

（2）使用@cross_origin装饰器（适用于配置特定的api接口）

from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)

# 只允许路径为'/login'跨域！
@app.route('/login')
@cross_origin()
def data():
    return jsonify({'name':'lxc'})

下边的表格是装饰器的参数：

装饰器参数	类型	Head字段	说明
origins	列表、字符串或正则表达式	Access-Control-Allow-Origin	配置允许跨域访问的源， *表示全部允许
methods	列表、字符串	Access-Control-Allow-Methods	配置跨域支持的请求方式， 如：GET、POST
expose_headers	列表、字符串	Access-Control-Expose-Headers	自定义请求响应的Head信息
allow_headers	列表、字符串或正则表达式	Access-Control-Request-Headers	配置允许跨域的请求头
supports_credentials	布尔值	Access-Control-Allow-Credentials	是否允许请求发送cookie， false是不允许
max_age	整数、字符串	Access-Control-Max-Age	预检请求的有效时长

 

4、将CORS与Cookie一起使用：

默认情况下，不允许跨站点提交Cookie，如果你希望服务器允许用户跨源发出Cookie或经过身份验证的请求，那只需把supports_credentials 设置为True即可。。。

from flask import Flask, session
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route("/")
def helloWorld():
  return "Hello, %s" % session['username']

 

5、将CORS与蓝图blueprint一起使用：

flask-cors同样也支持蓝图，只需要将一个蓝图实例传递给CORS类即可

from flask import Blueprint
from flask import render_template
from flask_cors import CORS, cross_origin
blue = Blueprint('user',__name__)
cors = CORS(blue)

@blue.route('/')
def fn():
    return render_template('html.html')

 

6、配置Access-Control-Allow-Origin（响应头添加header）：

@app.after_request
def after(resp):
    '''
    被after_request钩子函数装饰过的视图函数 
    ，会在请求得到响应后返回给用户前调用，也就是说，这个时候，
    请求已经被app.route装饰的函数响应过了，已经形成了response，这个时
    候我们可以对response进行一些列操作，我们在这个钩子函数中添加headers，所有的url跨域请求都会允许！！！

    '''
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp

也可以在普通视图函数中添加headers，根据自己的需求来。