Flutter:web项目跨域问题解决

前后端解决系列

文章目录

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

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

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

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

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

二、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】,内容片段如下:

bash 复制代码
# 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版本并部署至服务器,重新打开网页发现接口可以拿到数据了。

相关推荐
心灵宝贝1 小时前
CentOS 7 安装 bzip2-libs-1.0.6-13.el7.x86_64.rpm 的详细步骤
linux·运维·centos
mjx65302 小时前
windows查看端口使用情况,以及结束任务释放端口
linux
九皇叔叔3 小时前
Linux Shell 函数:从定义到实战,让脚本更高效
linux·运维·chrome·shell
2301_768350235 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
璞致电子6 小时前
fpga开发板ZYNQ 璞致 PZ7010/7020 邮票孔核心板简介-ZYNQ7000系列小系统学习板
linux·嵌入式硬件·学习·fpga开发·fpga·fpga开发板·xilinx开发板
华洛6 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
第四维度46 小时前
【全志V821_FoxPi】9-2 Linux IIC驱动MPU6050
linux·传感器·tina·mpu6050·v821
明远湖之鱼6 小时前
opentype.js 使用与文字渲染
前端·svg·字体
mjx65307 小时前
PyTorch快速入门
linux
90后的晨仔7 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js