Flutter Web CORS问题

弦苦

已于 2022-12-13 14:33:40 修改

阅读量665

点赞数

分类专栏： Flutter开发文章标签： flutter

于 2022-12-13 14:32:20 首次发布

本文链接：https://blog.csdn.net/phunxm/article/details/128301356

版权

Flutter开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Flutter Web CORS

CORS 相关概念

关于 CORS 概念，可参考 mozilla 的相关文档资料：

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.

协议请求跨域问题

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 跨域问题。

首页一直刷新中：

在这里插入图片描述