Flutter:web项目跨域问题解决

这篇具有很好参考价值的文章主要介绍了Flutter:web项目跨域问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前后端解决系列

文章目录

  • 一、Flutter web客户端解决本地环境调试跨域问题
  • 二、Flutter web客户端解决线上环境跨域问题

一、Flutter web客户端解决本地环境调试跨域问题

就一句命令【--web-browser-flag "--disable-web-security"】,用来屏蔽浏览器域名请求同源策略

// 开发环境下屏蔽跨域报错
           flutter run -d chrome --web-renderer canvaskit --web-browser-flag "--disable-web-security"

 配置在run/debug configurations中,使用run按钮直接运行

flutter web 跨域问题,玩转flutter,我的日常跳坑,笔记,flutter,前端,nginx,linux

二、Flutter web客户端线上环境解决跨域问题

首先确定几个信息

    1.使用的是网络框架dio进行请求

    2.web网页浏览地址:假设为http://localhost:3003

    3.引起报跨域错误的请求地址:假设为http://192.168.1.112:27005/loadImage

    4.确定一个虚拟接口:比如/proxyLoadPicture-pro,用来服务器拦截并反向代理到http://192.168.1.112:27005

处理步骤如下:

1.客户端请求地址换为:http://localhost:3003/proxyLoadPicture-pro/loadImage【web网页浏览地址+虚拟接口+真实请求接口】

2.服务端修改Nginx配置文件【nginx.conf】,内容片段如下:

# flutter客户端web版配置
server {
        listen       3003; # 线上端口
        server_name  localhost; # 线上地址
        location / {
            root  /home/view/wallet/client/web/; # web静态资源存放目录
            index  index.html index.htm; # 加载入口
            try_files  $uri  $uri/  /index.html;
        }

        # 加载图片跨域配置,/proxyLoadPicture-pro为前面确定好的虚拟api,主要拿来做拦截
        location /proxyLoadPicture-pro {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization,Refreshtoken,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            # 设置 options 请求处理
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Max-Age' 1728000 always;
                add_header 'Content-Type' 'text/plain; charset=utf-8' always;
                add_header 'Content-Length' 0 always;
                # 对于Options方式的请求返回200,表示接受跨域请求
                return 200;
            }
            # 设置反向代理 http://http://192.168.1.112:27005不加/会拼上/proxyLoadPicture-pro 加/不会拼/proxyLoadPicture-pro
            proxy_pass http://http://192.168.1.112:27005/; # 报跨域错误的真实API请求地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

3.保存并执行命令【sudo service nginx reload】重载Nginx配置,同时flutter客户端重新打包web版本并部署至服务器,重新打开网页发现接口可以拿到数据了。文章来源地址https://www.toymoban.com/news/detail-781902.html

到了这里,关于Flutter:web项目跨域问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题

    你是否渴望成为 Flutter 的专家,掌握更多的技巧和最佳实践?我们有个好消息要告诉你! Flutter 从零到一 基础入门到应用上线全攻略 正在等待你的加入!这个专栏包含了你需要的所有 Flutter 学习资源,包括代码示例和深度解析。专栏内容会持续更新,价格也会随之上涨。现

    2024年02月12日
    浏览(35)
  • 【Android常见问题(五)】- Flutter项目性能优化

    项目迭代开发一定程度后,性能优化是重中之重,其中包括了包体积,UI 渲染、交互等多个方面。 通过 Flutter 应用的混淆为入口,我们主要探讨了UI 渲染的优化。 其中就会涉及到一个非常关健的概念 ——「FPS,Frame Per Second」即「每秒展示帧数」,它代表了应用的流畅度。

    2024年02月15日
    浏览(51)
  • 【Flutter】flutter doctor network resources 报错,解决国内开发环境问题

    flutter doctor network resources 主要检查flutter开发工具运行过程中依赖的网络资源来源站是否可以正常访问,但国内通常都是无法访问的 下面介绍windows下的设置方法,如果你熟练使用mac或linux,通常会更自由,环境变量不会出现不识别的情况,参考本文档依旧可以完成配置 maven.

    2024年02月02日
    浏览(52)
  • flutter项目怎么判断是不是web平台?Unsupported operation: Platform._operatingSystem

    如果你使用Platform 这个工具来判断的时候,很有可能会报错:  ======== Exception caught by widgets library ======================================================= The following UnsupportedError was thrown building MyApp(dirty): Unsupported operation: Platform._operatingSystem The relevant error-causing widget was:  Platform判断的时候

    2024年01月22日
    浏览(48)
  • flutter qr_flutter二维码库填充不满问题解决方案

     全局搜索找到_PaintMetrics类的_calculateMetrics()方法,将 这一行代码注释掉,然后添加_pixelSize = pixelSize这行代码,完整代码如下: class _PaintMetrics {   _PaintMetrics({     required this.containerSize,     required this.gapSize,     required this.moduleCount,   }) {     _calculateMetrics();   }   final int

    2024年01月19日
    浏览(40)
  • Flutter如何支持浏览器跨域

    当使用 flutter 构建 web 项目,直接运行在 chrome 浏览器发出网络请求会发生跨域错误  strict-origin-when-cross-origin(CROS) ,比如在 dart 代码直接用  dio.get(\\\"https://www.yunfuit.com\\\") ,dio 会报错,在 chrome 的 DevTools 中会发现 CROS 错误。 解决办法: 在 flutterbincache 删除 flutter_tools.stamp

    2024年02月17日
    浏览(37)
  • flutter项目启动安卓模拟器不好使的问题

    在flutter项目中,ios模拟器好使,安卓模拟器不好使. 分为2种情况: 但是在android studo中新建安卓项目,却可以用安卓模拟器运行启动. 解决方法: 1.首先启动vpn,让项目可以提示错误. 2.然后再android studo中运行,如果报错,可能会显示一个版本号,例如:30.0.3 那么就设置 android studo的Android

    2024年02月11日
    浏览(37)
  • 【Flutter】Flutter 图片缓存入门:cached_network_image 解决图片加载的问题

    在这里,我们将一起探讨 Flutter 中的一个非常实用的库——cached_network_image。如果你是一位 Flutter 开发者ÿ

    2024年02月14日
    浏览(42)
  • flutter3.7版本下使用flutter boost解决使用platview崩溃或异常问题

    背景   工程使用了混合开发,使用flutter boost插件,flutter 的activity1 frament1 跳转activity2 frament2,frament1 包含platformView,按照上面老哥解决崩溃问题的基础上,出现activity2 frament2返回activity1 frament1时,platformView触摸事件没有响应。问题具体见:https://github.com/alibaba/flutter_boost/is

    2024年02月13日
    浏览(45)
  • flutter-设置开屏页 解决开屏白屏问题

    当您的应用程序打开时,本机应用程序会短暂加载 Flutter。默认情况下,在此期间,本机应用程序会显示白色启动屏幕。该包自动生成 iOS、Android 和 Web 本机代码,用于自定义本机启动画面背景颜色和启动图像。支持深色模式、全屏和特定于平台的选项。 因为我不需要使用到

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包