【flask】Flask解决跨域的问题

一、什么是跨域

  • 为什么会出现跨域问题

由于浏览器的同源策略限制,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互

同源策略(Sameoriginpolicy)是一种约定,同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),是浏览器最核心也最基本的安全功能

  • 跨域案例

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

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

二、问题背景

  • 问题描述

跨域文件上传的时候,浏览器会自动发起一个OPTIONS方法到服务器,现在后台解决前端跨域跨域请求的问题

  • 字段信息

客户端发起的这个OPTIONS可以说是一个"预请求",用于探测后续真正需要发起的跨域POST请求对于服务器来说是否是安全可接受的,因为跨域提交数据对于服务器来说可能存在很大的安全问题

请求头Access-Control-Request-Method用于提醒服务器在接下来的请求中将会使用什么样的方法来发起请求

Access-Control-Allow-MethodAccess-Control-Allow-Origin分别告知客户端,服务器允许客户端用于跨域的方法和域名

三、引用示例

  1. 下载flask_cors
pip install flask-cors
  1. 使用flask_cors的CORS
    代码示例
from flask_cors import *

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

Flask-CORS的官方文档链接

四、代码实现

现在我们看看解决问题的实际案例

from flask_cors import CORS
app = Flask(__name__,)
# r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
CORS(app, resources=r'/*')
# 上传文件
@uploadFiles.route('/upload', methods=['POST'])
def uploadFile():
	result_text = {"statusCode": 200,"message": "文件上传成功"}
	response = make_response(jsonify(result_text))
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'OPTIONS,HEAD,GET,POST'
    response.headers['Access-Control-Allow-Headers'] = 'x-requested-with'
    return response

使用POSTMAN请求

这里写图片描述

五、问题踩坑

由于项目中路由是多级路由,通过主路由跳转到子路由,一开始的时候,允许跨域的配置在上传文件的子路由中进行设置,发现OPTIONS请求响应值中并没有返回预期的头文件,将跨域设置在主路由中设置即可


欢迎关注个人公众号
在这里插入图片描述

  • 18
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sysu_lluozh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值