Flask解决接口跨域问题

1、什么是跨域CROS

CORS(Cross-Origin Resource Sharing,跨域资源共享)是一种浏览器安全策略,用于控制在一个网页应用中如何让一个域的Web页面能够请求另一个域的资源。在Web开发中,由于同源策略(Same-Origin Policy)的限制,一个网页只能请求同一域下的资源,而不能直接请求其他域下的资源。

同源策略是浏览器为了增强安全性而采取的一项重要措施。然而,由于现代Web应用的发展,需要在不同域之间进行数据交互的情况也变得非常普遍。CORS机制被引入,以在一定程度上解除同源策略的限制,允许服务器指定哪些域可以访问其资源。

CORS 的核心思想是在HTTP头中使用一些新的字段,告诉浏览器是否允许跨域请求。当浏览器发起一个跨域请求时,它会首先发送一个预检请求(preflight request)给服务器,以获取服务器是否允许实际的请求。如果服务器允许,浏览器会继续发送实际的请求。

以下是一些常见的CORS相关的HTTP头字段:

  • Origin: 表示发起请求的域,用于标识请求的来源。
  • Access-Control-Allow-Origin: 服务器响应中包含这个头,表示允许访问的域,可以是一个具体的域或使用通配符(*)表示允许任意域。
  • Access-Control-Allow-Methods: 服务器响应中包含这个头,表示允许的HTTP方法,如GET、POST等。
  • Access-Control-Allow-Headers: 服务器响应中包含这个头,表示允许的自定义请求头。
  • Access-Control-Expose-Headers: 服务器响应中包含这个头,表示允许暴露给浏览器的响应头,使得客户端能够访问。

通过配置这些头信息,服务器可以细粒度地控制是否允许跨域请求以及允许的跨域行为。

2、Flask接口支持跨域的方法

2.1 安装相应的包

pip install flask-cors

2.2 引用flask-cors

from flask_cors import CORSapp = Flask(__name__)CORS(app)

这种情况下,CORS扩展将允许所有的跨域请求。 但也可以通过配置选项来限制允许的来源、方法等。

CORS(app, origins='http://example.com')

3、单个接口的跨域设置

@app.route('/crosset', methods=["POST"])
@cross_origin()
def set1():print("我设置跨域了,可以访问了")

还可以通过cross_origin装饰器的参数来进一步自定义跨域请求的行为。例如,你可以指定允许的来源、方法等:

@app.route('/corsset2')
@cross_origin(origins='http://example.com', methods=['GET', 'POST'])
def set2():print("我设置跨域了,可以访问了")

4、如何判断接口是否支持跨域

打开浏览器,找到Headers,如果接口不支持跨域请求,你将不会看到Access-Control-Allow-Origin字段,或者该字段的值为其他来源。

如果接口支持跨域请求,你会在响应的头部信息中看到Access-Control-Allow-Origin字段,该字段指定了允许跨域请求的来源。如果该字段的值为*,表示允许所有来源的跨域请求。

例如,如果你的接口允许来自http://localhost.8080的跨域请求,那么你会在响应的头部信息中看到类似如下的字段:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/292222.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java】Mac下的Tomcat安装配置

🔔Tomcat是一个免费的开源web应用服务器,是开发和调试JSP 程序的首选🖐可利用它响应HTML页面的访问请求。 我们在进行网络编程时,其中重要的中间件就是Tomcat,下面我们将进行在Mac上配置Tomcat的讲解。😲 …

maven限制内存使用峰值/最大内存

前言 通过设置虚拟机的内存大小,达到限制maven内存使用峰值的效果 方法1:修改mvn脚本 找到mvn脚本在MAVEN_OPTS参数值添加-Xms、-Xmx参数:MAVEN_OPTS"$MAVEN_OPTS -Xms512m -Xmx512m"效果图 windows系统下修改MAVEN_OPTS参数 …

debian10安装配置vim+gtags

sudo apt install global gtags --version gtags //生成gtag gtags-cscope //查看gtags gtags与leaderf配合使用 参考: 【VIM】【LeaderF】【Gtags】打造全定制化的IDE开发环境! - 知乎

构建搜索引擎,而非向量数据库(Vector DB) [译]

原文:Build a search engine, not a vector DB 作者: Panda Smith 在过去 12 个月中,我们见证了向量数据库(Vector DB)创业公司的迅猛增长。我此刻并不打算深入探讨它们各自的设计取舍。相反,我更想探讨和…

VM进行TCP/IP通信

OK就变成这样 vm充当服务端的话也是差不多的操作 点击连接 这里我把端口号换掉了因为可能被占用报错了,如果有报错可以尝试尝试换个端口号 注: 还有一个点在工作中要是充当服务器,要去网络这边看下他的ip地址 拉到最后面

防火墙安全策略

目录 一、防火墙种类 二、防火墙流量控制手段 1、包过滤技术(传统) 2、状态检测技术 (1)、状态检测机制 三、安全实验 1、拓扑 2、需求 3、配置思路 4、关键配置截图 5、验证 一、防火墙种类 对于防火墙来说就是针对哪…

Python和数据分析:Numpy新手指南

Numpy(Numerical Python的缩写)是一个用于处理多维数组和执行数学运算的强大库,对于Python中的数据科学和数值计算任务至关重要。本博客将专注于Numpy,为初学者提供一份详细的指南,这篇指南都将帮助你掌握Numpy的基础知…

LeetCode做题总结 1. 两数之和

1. 两数之和 暴力法哈希法重新分析Java语法 暴力法 2023.09.20 刚开始用暴力法破解&#xff08;C&#xff09; class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {vector<int> a;for(int i0; i<nums.size()-1; i) {for(…

ros2 学习11-通信中动作的定义及自定义action 交互示例

机器人是一个复杂的智能系统&#xff0c;并不仅仅是键盘遥控运动、识别某个目标这么简单&#xff0c;我们需要实现的是送餐、送货、分拣等满足具体场景需求的机器人。 在这些应用功能的实现中&#xff0c;另外一种ROS通信机制也会被常常用到——那就是动作。从这个名字上就可以…

我的创作纪念日- 从第一天到今天

目录 机缘 收获 持续学习和探索新技术 深化现有知识 代码里有所有 日常 扩大影响力 维护创作的质量和一致性 反馈和自我反思 憧憬 在这平凡的一天里&#xff0c;我选择赋予它特殊的意义。这不仅仅是我的创作旅程的一个节点&#xff0c;更是我个人成长和技术进步的见证…

HEA---code

import matplotlib.pyplot as pltimport numpy as npfrom matplotlib.animation import FuncAnimationfrom matplotlib.offsetbox import OffsetImage, AnnotationBbox# 创建一个画布和坐标轴对象 fig, ax plt.subplots() # 创建一个参数t&#xff0c;范围是0到2π t np.lins…

「工业遥测」图表控件LightningChart在水工业中的应用

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…