flutter开发web应用网络请求后台失败--记录遇到的跨源资源共享问题

前因

愉快开发flutter的web应用,发现网络请求后台一直请求不通啊,百思不得其解后偶然遇到了跨源资源共享(CORS)这一名词,才发现了问题关键所在。

什么是跨源资源共享

引用跨源资源共享(CORS) - HTTP | MDN (mozilla.org)的专业分析,只列出关键点:

运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求--->

出于安全性,浏览器限制脚本内发起的跨源 HTTP 请求

例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头

----------------通俗一点讲即为

游览器本来是localhost的一个web,因为跨源资源共享限制,被禁止向后台(也就是某某ip的那个域)进行网络请求了

解决方式

还是引用mdn的图

发送端在请求报文增加如下字段表明自己的域

Origin: https://foo.example

后台返回的http响应报文增加如下字段表明自己的资源可以被任意外源访问

Access-Control-Allow-Origin: *

实际上,flutter开发web不需要也不能手动设置Origin字段,后台正确设置响应头字段即可

事实上,后台的相关字段不仅可以设置为*,也可以设置单个与多个域名

额外补充

为什么要有这个机制?

  1. 保护用户数据:同源策略确保了一个源(例如一个网站)的脚本不能访问另一个源的文档属性或者其他资源。这种隔离帮助保护用户数据免受恶意网站的访问。

  2. 防止跨站点攻击:例如,跨站点脚本攻击(XSS)和跨站点请求伪造(CSRF)。通过限制脚本只能与同一源的资源进行交互,减少了这类攻击的风险。

  3. 数据隔离:同源策略确保了不同网站的数据不会相互干扰,从而提供了一种数据隔离机制。

为什么JSP不需要这么折腾?(鞭尸旧技术)

因为Tomcat等服务器,和“页面”是“本地”一起运行的

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

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

相关文章

pytorch(四)、完整小网络的搭建和sequential的使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言搭建小网络和sequential的使用一、 第一种形式如下:二、第二种方式,使用sequential 前言 至此,神经网络的基础部分就基本结…

初阶数据结构:顺序表

目录 1. 引子:线性表2. 简单数据结构:顺序表2.1 顺序表简介与功能模块分析2.2 顺序表的实现2.2.1 顺序表:存储数据结构的构建2.2.2 顺序表:初始化与空间清理(动态)2.2.3 顺序表:插入与删除数据2…

Spring Boot程序的打包与运行:构建高效部署流程

引言 在现代应用开发中,高效的打包和部署流程对于项目的开发、测试和上线至关重要。Spring Boot作为一种快速开发框架,提供了方便的打包工具和内嵌式的Web服务器,使得打包和运行变得更加简单。本文将研究在Spring Boot应用中如何进行打包&am…

Vue四个阶段,八个钩子函数

- 创造阶段:创建Vue实例和初始化数据事件,数据代理,监测watch - beforeCreate,只是创建实例,不能this.$el,this.msg,this.方法名() - created,数据代理了,能v…

Python 面向对象绘图(Matplotlib篇-16)

Python 面向对象绘图(Matplotlib篇-16)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

ffmpeg 常用命令行详解

概述 ffmpeg 是一个命令行音视频后期处理软件 1. 裁剪命令 参数说明 -i 文件,orgin.mp3 为待处理源文件-ss 裁剪时间,后跟裁剪开始时间,或者开始的秒数-t 裁剪时间output.mp3 为处理结果文件 ffmpeg -i organ.mp3 -ss 00:00:xx -t 120 o…

4个值得使用的免费爬虫工具

在信息时代,数据的获取对于各行业都至关重要。而在数据采集的众多工具中,免费的爬虫软件成为许多用户的首选。本文将专心分享四款免费爬虫工具,突出介绍其中之一——147采集软件,为您揭示这些工具的优势和应用,助您在数…

了解Vue中日历插件Fullcalendar

实现效果如下图: 月视图 周视图 日视图 官方文档地址:Vue Component - Docs | FullCalendar 1、安装与FullCalendar相关的依赖项 npm install --save fullcalendar/vue fullcalendar/core fullcalendar/daygrid fullcalendar/timegrid fullcalend…

算法笔记(动态规划入门题)

1.找零钱 int coinChange(int* coins, int coinsSize, int amount) {int dp[amount 1];memset(dp,-1,sizeof(dp));dp[0] 0;for (int i 1; i < amount; i)for (int j 0; j < coinsSize; j)if (coins[j] < i && dp[i - coins[j]] ! -1)if (dp[i] -1 || dp[…

springCloud使用apache的http类和RestTemplate以及Eureka

使用apache的&#xff1a; package com.csgholding.pvgpsp.eqp.util;import com.esotericsoftware.minlog.Log; import org.apache.commons.collections4.MapUtils; import org.apache.http.HttpEntity; import org.apache.http.client.config.RequestConfig; import org.apac…

计算机毕业设计-----SSH超市便利店综合管理系统

项目介绍 便利店管理系统共分为两个角色&#xff1a;管理员和销售人员 销售员角色包含以下功能&#xff1a; 销售员登录,管理销售记录等功能。 管理员角色包含以下功能&#xff1a; 管理员角色登录,销售员管理,商品管理,采购管理,库存管理,销售记录管理,成本报表统计,收入报…

全面了解网络性能监测:从哪些方面进行监测?

目录 摘要 引言 CPU内存监控 磁盘监控 网络监控 GPU监控 帧率监控 总结 摘要 本文介绍了网络性能监测的重要性&#xff0c;并详细介绍了一款名为克魔助手的应用开发工具&#xff0c;该工具提供了丰富的性能监控功能&#xff0c;包括CPU、内存、磁盘、网络等指标的实时…