【flask跨域问题】解决它

大概7-8年前,前后端还没开始分离或者刚开始分离的之前,跨域问题很多。
后来我就没在遇到过了,这次做一个小项目,又遇到了,记录下。
现在前端的脚手架都自己能解决了。

1. 跨域

是因为出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
跨域问题就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时出现的问题。

2、问题描述

当客户端向服务器端请求ajax服务时,如果客户端和服务器端域名不一致,就会出现跨域问题,ajax报错如下:

No ‘Access-Control-Allow-Origin’ header is present on the requested 。

3、解决方式:

1)安装flask_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()
### 解决 Flask 应用中的问题Flask 中处理 CORS(源资源共享)可以通过 `flask-cors` 扩展来实现。以下是几种常见的方法: #### 方法一:全局配置 CORS 如果希望为整个 Flask 应用启用 CORS 支持,可以使用 `CORS` 类进行全局设置[^2]。 ```python from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app, resources=r'/*') # 配置允许所有路由的请求 @app.route('/api/data') def get_data(): return {'data': 'Hello, CORS with global settings!'} if __name__ == '__main__': app.run(debug=True) ``` 上述代码通过 `resources=r'/*'` 参数指定了所有路由都支持访问。 --- #### 方法二:局部配置 CORS 对于某些特定的视图函数,可以选择性地启用 CORS 支持。这种方式更加灵活,适用于仅部分接口需要的情况[^1]。 ```python from flask import Flask, jsonify from flask_cors import cross_origin app = Flask(__name__) @app.route('/api/specific-data', methods=['GET']) @cross_origin() # 局部开启 CORS 支持 def specific_data(): return jsonify({'data': 'This is a specific route with CORS enabled.'}) if __name__ == '__main__': app.run(debug=True) ``` 在这里,装饰器 `@cross_origin()` 只作用于 `/api/specific-data` 这一路由。 --- #### 方法三:增强安全性并支持凭证传输 当应用程序涉及 Cookie 或身份验证时,可能需要传递用户凭据。此时应显式指定参数以支持凭据共享[^3]。 ```python from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) # 启用对带凭据请求的支持 @app.route("/") def hello_world(): return "Hello, cross-origin-world!" if __name__ == '__main__': app.run(debug=True) ``` 此配置允许浏览器发送带有认证信息(如 Cookies 和 HTTP 认证头)的请求。 --- #### 安装依赖库 为了使用 `flask-cors` 功能,需先安装该扩展包。执行以下命令完成安装: ```bash pip install -U flask-cors ``` --- ### 总结 以上三种方式分别针对不同的需求场景提供了解决方案: - **全局配置**适合所有 API 接口都需要支持; - **局部配置**则用于限定范围内的接口; - **增强安全性和支持凭证**适配更复杂的业务逻辑。 确保根据实际项目需求选择合适的方案,并合理调整相关参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值