什么是跨域问题
跨域问题指的是浏览器限制了从一个源（协议、域名、端口）访问另一个源的资源的行为，这个限制是浏览器的一个安全机制。如果一个网页从一个源加载了另一种类型的资源（例如 HTML、CSS、脚本或图像）但是资源的来源是不同的源，那么就会发生跨域问题。
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
实际解决
1.下载flask_cors 包
python
复制代码
pip install flask-cors
2.使用flask_cors的CORS
app初始化的时候就加载配置
python
复制代码
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 |
预检请求的有效时长 |
middlewares.py中加入
python
复制代码
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)