Python Flask Html跨域错误解决 错误内容...has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

最新推荐文章于 2025-03-13 16:32:22 发布
最新推荐文章于 2025-03-13 16:32:22 发布
阅读量4.8k 收藏 6
点赞数 8
分类专栏： python web 文章标签： flask CORS html 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26906345/article/details/97884119
版权
本文详细介绍了在使用Python Flask框架进行前后端分离开发时，如何解决常见的跨域问题。通过安装并配置flask-cors扩展，可以轻松实现跨域资源共享（CORS），避免因浏览器的同源策略限制导致的请求失败。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Python Flask Html跨域错误解决 错误内容...has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

跨域问题

浏览器在访问一个资源，或者和后台请求一项服务时，如果涉及到后台操作，总会报一个跨域问题错误，以下是Flask和Html交互时的解决办法。

完整错误

跨域错误

jquery-2.2.3.min.js:4 Access to XMLHttpRequest at ‘http://127.0.0.1:5000/savepic’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方法（推荐）

  1. 安装flask-cors (Anaconda Prompt或者命令提示符中运行)
pip install flask-cors
  1. 在app=Flask(name)后添加引用
app = Flask(__name__)
#自动在报文头部加入相应内容
CORS(app, resources=r'/*')

其他方法（不推荐）

  1. 改浏览器配置；
  2. 返回增加headers内容，比较麻烦，每个返回都需要单独加。

最终结果

成功返回值

出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1万+
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested
佛系写BUG的博客
02-02 9426
后端添加 response.setHeader(“Access-Control-Expose-Headers”, “Content-Disposition”);Access-Control-Expose-Headers 响应报头 指示哪些报头可以 公开 为通过列出他们的名字的响应的一部分。Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）后面添加两个行代码，可以解决前端跨域问题。在使用CORS方式跨域时，浏览器只会返回 默认的头部 Header。
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
weixin_59997843的博客
03-13 2059
提供了简洁的注解驱动方式解决跨域问题，适用于快速开发场景。对于企业级应用，建议通过全局配置统一管理跨域规则，兼顾安全性和可维护性。通过合理配置来源、方法和头信息，既能保障接口的开放性，又能有效防范潜在的安全风险。最近，华为云与硅基流动联合推出了一款强大的 AI 模型——满血版 DeepSeek R1。这款模型不仅性能强大，更重要的是，注册即送 2000 万 Token！对于开发者、研究人员和 AI 爱好者来说，这无疑是一个巨大的福利。那么，2000 万 Token 到底是什么概念？点击这里注册。
has been blocked by CORS policy: NO 'Access-Control-Allow-Origin' header is present on the reauested
人生就是一场修行
07-23 2万+
软件环境 Django + DRF VUE 同源策略 浏览器的同源策略， 浏览器发现ip或端口是不一样的，就会认为存在风险，会进行拦截。 除非后端告诉浏览器允许。 简单请求和复杂请求 HTTP方法是下列方法之一 　　HEAD， GET，POST HTTP头信息不超出以下几种字段 　　Accept， Accept-Language， Content-Language， Last-Event-I...
前后端分离，报跨域错误 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
shihan175的博客
06-21 666
前后端分离，报跨域错误 been blocked by CORS policy: No 'Access-Control-Allow-Origin'
vue3 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
01-13
### Vue3 中解决 CORS 错误 'Access-Control-Allow-Origin' 当在 Vue3 项目中发起 HTTP 请求时，可能会遇到由于服务器端未设置 `Access-Control-Allow-Origin` 响应头而导致的跨源资源共享 (CORS) 问题。这通常表现...
出现 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the 解决方法
06-18
出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." 这个错误是因为浏览器的跨域资源共享 (Cross-Origin Resource Sharing, CORS) 策略限制...
vue has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
12-29
为了使这些请求成功完成，服务器端需正确配置响应头`Access-Control-Allow-Origin`[^1]。 #### 使用代理解决开发环境下的跨域问题 在开发环境中，一种常见的做法是在`vue.config.js`文件内设置代理规则： ```...
Access to XMLHttpRequest at 'http://localhost/media/m1/get' from origin 'http://127.0.0.1:8849' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
03-08
错误信息显示在访问本地服务时，跨域请求被阻止了，因为缺少'Access-Control-Allow-Origin'头。我需要详细分析这个问题，并给出解决方案。 首先，用户是在开发环境下遇到的这个问题，使用本地服务器（127.0.0.1:...
cards.html:1 Access to XMLHttpRequest at 'http://localhost:8000/api/provinces/' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
最新发布
04-23
另外，用户可能需要手动添加响应头，比如在after_request钩子中设置Access-Control-Allow-Origin等头部，但这种方法比较繁琐，不如使用扩展方便。 还需要注意中间件的顺序，特别是在Django中，corsheaders的中间件...
跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is
weixin_44100313的博客
09-07 15万+
错误信息 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 意思是：cors阻止了你请求的资源（跨域问题）； 解决方法: spring项目在相应方法上加上这个注解 @CrossOrigin 这样这个错误就解决了。希望可以有所帮助！ ...
在进行前后端分离项目时，前后端跨域问题的报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
c_xiao_dian_dian的博客
07-01 1089
表示页面访问的地址是http://localhost:8080。总结：可以在Java使用配置类实现也可以使用nginx进行反向代理实现，你可以选择自己喜欢的方式实现噢~,有任何问题可以在评论区提出讨论噢~6.输入net start nginx启动nginx，输入net stop nginx停止nginx。root mall;表示前面第2步自己参加的用来存储前端的文件夹名字。其中conf文件夹是配置包，mall是自己创建用来存储前端的文件夹。3.打开conf文件夹，再打开nginx.conf文件，进行配置。
请求被拦截has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is
weixin_48414266的博客
02-26 11万+
浏览器请求虚拟机linux的nginx 被拦截，在nginx的conf配置文件的location中添加：add_header Access-Control-Allow-Oriain '*'; 图片截图自https://www.uedbox.com/post/50992/
flask跨域访问问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present
和大家一起涨芝士
12-09 449
flask跨域访问问题 Access to XMLHttpRequest at 'http://localhost:5000/get_image_data' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
解决前后端跨域报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
wsaicyj的博客
11-11 2万+
来自一个IP端口的页面（前端项目），要访问另一个IP端口的资源（springboot请求接口），会产生跨域访问。
解决Flask中出现的跨域问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header...
瑾辞的博客
12-23 2014
今天在用flask做接口进行本地调用测试时发现调用报错 如图所示 解决办法： 在项目目录打开终端，安装以下库 pip install -U flask-cors 再在代码中插入 CORS(app, resources=r'/*') 如：
跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin和 It does not have HTTP ok status
weixin_45059597的博客
07-21 1万+
SpringBoo vue项目发布到服务器出现跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin 和 Response to preflight request doesn’t pass access control check: It does not have HTTP ok status. 解决springboot项目和Vue项目部署到同一个服务器出现跨域请求问题 has been blocked by CORS p
解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present
热门推荐
不完美的红烧肉的博客
10-21 38万+
说一下做项目时需要用到html2canvas做项目截图踩到的跨域坑。 项目需要拉取用户的头像，而linkedin和微信的头像存放于cdn中，这边涉及到的跨域问题。 坑1： 由于跨域，画布被污染，不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。 按网上说的做， 配置 useCORS: true, ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值