Flutter Web CORS问题

news2024/11/29 6:30:47

Flutter Web CORS

    • CORS 相关概念
    • 协议请求跨域问题
      • App2Web
      • CodingApp

CORS 相关概念

关于 CORS 概念,可参考 mozilla 的相关文档资料:

  • Cross-Origin Resource Sharing (CORS)
  • Reason: CORS header ‘Access-Control-Allow-Origin’ missing

An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json .

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.

mdn-cors_principle#60%

The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers. Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to mitigate the risks of cross-origin HTTP requests.

相关 issues 讨论:

  • #43809 - [web] How to start a ‘normal’ Chrome instance? Chrome extensions are needed for development
  • #46904 - Disable Origin Policy CORS in Flutter web
  • stackoverflow - solve flutter web api cors error

协议请求跨域问题

App2Web

在将App改造适配Web实验时,执行 flutter run -d chrome 启动 Chrome 访问调试 flutter web app,首页 localhost 域请求 coding.net 域名下的 access 协议

  • https://coding.net/api/access/json
  • https://coding.net/api/access/pb

报 CORS 错误:

在这里插入图片描述

CodingApp

在调试基于 FlutterWeb 的 CodingApp 时,本地启动 web server,在Chrome打开形如 http://localhost:51362 的 url 链接访问首页;桌面端Google Chrome浏览器、手机端MOA开启远程办公和内网IP访问、内网域名解析之后,通过IP链接( http://10.20.89.64/ )访问首页。
但是,从首页 Origin(localhost 或 10.20.89.64)向 Host(xxx.coding.net)发起协议请求,存在 CORS 跨域问题。

首页一直刷新中:

在这里插入图片描述

IP访问报错 CORS error:

在这里插入图片描述

首页拉取 我关注的流水线 报错 CORS error:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

震撼发布,快鲸企微工单任务管理系统上线了

快鲸推出的企微SCRM系统被大家所熟知,这是一款帮助企业通过企微维护客户的管理系统。在客户管理服务过程中,很多企业需要通过工单来进行事项处理和文件内容流转,为了满足这方面客户的需求,快鲸工单系统也应运而生。 品牌都将客户的…

关于json的集合接收和多表关联查询

文章目录一、json的接收与发送1.postman工具发送格式2.controller接收处理二、查询集合数据1.利用mybatis-plus进行分页处理三.读取数据配置mapper.xml输出结果提示:以下是本篇文章正文内容,下面案例可供参考 一、json的接收与发送 1.postman工具发送格…

selenium之鼠标操作详解

前言 人类频繁的用手操作鼠标和键盘,为了解决这个问题,selenium工具为我们提供了一个类来处理这些事件— Actionchains ,该类可以完成鼠标移动,鼠标点击事件、键盘输入、内容菜单交互等交互行为。 1、常见的鼠标操作有&#xff1…

DSPE-Thiol; DSPE-SH; 二硬脂酰磷脂酰乙醇胺改性巯基

名称:DSPE-Thiol DSPE-SH 全称:18:0 PE Thiol 中文名称:二硬脂酰磷脂酰乙醇胺改性巯基 结构式: 外观:白色粉末 溶剂:HCCl3及其他有机溶剂 反应基团:马来酰亚胺,可以跟任何带有马来酰亚胺活…

【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

[附源码]Nodejs计算机毕业设计基于JAVA语言的宠物寄养管理Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分…

Java基于springboot+vue+elementUI城乡精准扶贫信息管理系统

系统设计的主要意义在于,一方面,对于网站来讲,系统上线后可以带来很大的便利性,精准扶贫网站管理属于非常细致的管理模式,要求数据量大,计算机管理可以提高精确性,更为便利的就是信息的查询&…

短信引导用户关注公众号短信唤起小程序h5跳转公众号引导用户关注

背景 想要短信唤起微信并引导用户关注公众号,经过调研这样是做不了的,但是我们发现可以通过短信唤起小程序,那么我们只需要在小程序中内嵌一个h5,用 h5 来引导跳转公众号就好了。 那么我们拆解一下要做的事情: 短信唤…

数字孪生园区创新实验室落地解决方案

园区实验室管理实质上是对园区、人员、实验试剂耗材、仪器等的整体管理。借助数字孪生技术,实现数字化管理,可以大大提高实验室管理者以及科研人员的工作效率。 数字孪生园区创新实验室落地解决方案 北京智汇云舟科技有限公司成立于2012年,专…

概论_第4章__期望的定义和性质

一. 定义 1. 离散型随机变量的期望 2. 连续型随机变量的期望 定义2:设连续型随机变量 X的概率密度为f(x), 若积分 绝对收敛, 称其为X的数学期望。记为: 注意: 被积函数是: xf(x) 看例题: 几种重要分布的数学期…

Oracle-图形化界面-数据库安装

0、Oracle网址 1、oracle官网 2、Oracle下载地址 3、官网安装教程 1、Oracle数据库简介 Oracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是…

还在手写接口文档?看Swagger如何助你解放双手去吃鸡

近期又有小伙伴私信辉哥,问辉哥现在的接口文档都是怎么编写的?今天辉哥就给大家聊聊,项目中怎么接入Swagger,实现在线接口文档。来,咱们这就开怼! 一. 前言 现在的项目开发很多都会采用前后端分离的模式&…

Linux程序包管理工具

Linux程序包管理工具 1. 程序包 我已经使用 Linux 已经有很长一段时间了,日常中经常会安装或者卸载一些应用,久而久之很多的命令已经让我的记忆能力不容乐观了,所以今天在这里写一点管理程序包管理的博客。一方面,之后可以帮助我…

我在阿里做测试,入职5个月的回顾与总结

初来阿里实习的时候,我对测试人员的职责知之甚少,在校时更是从未接触过测试工作。一头雾水之际,主管说:“做项目吧,在实战中快速成长”。从学生到校招生,我在思维和心态完成了一次真正意义上的转变&#xf…

众享比特董事长严挺出席2022中国计算机大会“元宇宙、Web3.0、NFT:机遇还是泡沫?”技术论坛

12月10日晚,为期三天的2022中国计算机大会(2022CNCC)成功落下帷幕。众享比特董事长严挺出席“元宇宙、Web3.0、NFT:机遇还是泡沫?”技术论坛并参与专题研讨。 第三行左一为众享比特董事长严挺 中国计算机大会&#xf…

一文教你集成通知系统的多种HMS Core服务,实现数据安全和真实用户验证

1、介绍 Overview 云数据库是AppGallery Connect提供的服务之一,实现云端数据的同步,提供统一的数据模型和丰富的数据管理接口。在保证数据的可用性、可靠性、一致性,以及安全等特性基础上,能够实现数据在客户端和云端之间的无缝…

SpringBoot扩展SpringMVC配置

SpringBoot扩展SpringMVC配置1.继承WebMvcConfigurer接口2.实现一个自己的视图解析器3.其他自定义配置视图跳转Spring Boot通过WebMvcAutoConfiguration来提供一些默认配置;大多数时候使用默认的配置即可满足要求。但有时可能需要做一些个性化定制,此时就…

Nginx 可视化!配置监控一条龙!

nginx-gui这个东西真的要吹一波,太好用了,而且源码公开。对于我这样一个作为Linux菜鸟的Java开发来说,这个可视化配置工具简直是福音! 需求 nginx 可视化管理,例如 配置管理 性能监控 日志监控 其他配置 目前已实现…

CIDR格式网络策略值设置方式

CIDR的格式是IP网段/网络ID,斜杠左面的是网络IP段,斜杠右面是网络ID。如果网络用的是IPV4,它最大有效值是32,它的作用本质上是用来表示网络策略所用的子网掩码二进制里的1有多少个,也就是网络ID的位数。 传统的IPV4-t…

策略模式

文章目录策略模板模式1.策略模式的本质2.何时选用策略模式3.优缺点4.策略模式的结构5.实现支付案例支付案例参数不一致问题策略模板模式 1.策略模式的本质 策略模式的本质:分离算法,选择实现。 纵观整个策略模式实现的功能和设计,它的本质还是“分离算法…