Flask解决跨域问题

什么是跨域问题

跨域问题指的是浏览器限制了从一个源（协议、域名、端口）访问另一个源的资源的行为，这个限制是浏览器的一个安全机制。如果一个网页从一个源加载了另一种类型的资源（例如 HTML、CSS、脚本或图像）但是资源的来源是不同的源，那么就会发生跨域问题。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.xxma.com/	http://www.xxma.com/index	否	同源(协议、域名、端口号相同)
http://www.xxma.com/	https://www.xxma.com/	是	协议不同(http/https)
http://www.xxma.com/	http://www.xm.com/	是	主域名不同
http://www.xxma.com/	http://cnblog.xxma.com/	是	子域名不同
http://www.xxma.com:8080/	http://www.xxma.com:8081/	是	端口号不同

实际解决

1.下载flask_cors 包

pip install flask-cors

2.使用flask_cors的CORS

app初始化的时候就加载配置

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
# r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求
CORS(app, resources=r'/*')
if __name__ == "__main__":
    app.run()

配置参数说明

参数	类型	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	预检请求的有效时长

3.在被请求的Response header中加入header

middlewares.py中加入

def add_cors_headers(response: Flask.response_class) -> Flask.response_class:
    response.headers.set("Access-Control-Allow-Origin", "*")
    response.headers.set("Access-Control-Allow-Headers", "*")
    response.headers.set("Access-Control-Allow-Methods", "*")
    return response

# 在请求上下文中添加中间件函数
def setup_middlewares(app: Flask) -> None:
    app.after_request(add_cors_headers)