flutter for web 带cookie的网络请求跨域问题处理

学习flutter 已经有一段时间了，然后今年三月份flutter 2.0正式的支持之后，一直想尝试flutter web，但是奈何没有时间，最近正好有时间了，于是把自己的一个移动端项目改了改之后，打算编译运行成web项目。本来前面都还算比较顺利的，就是改了一些以前移动端的特有的一些功能之外，没有什么特别的改动，有问题看着报错都可以自行解决的。

当一切准备就绪项目跑起来之后，因为有调用服务器接口，然后本地run就出现了跨域问题。然后因为自己一直没有接触过前端，所以只是知道有跨域这么一说，但是没有了解过，因为平时也没有机会接触，然后我就陷入了不断找flutter web 跨域的解决方案。

网上有很多方法，但是并没有什么用，那些让改配置的，你们可以不用去看了，应该改了什么用都没有。目前我找到的解决跨域问题的两个方法（不了解跨域的朋友，可以先去比一下知识）。

方法一：

普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

如果你只是需要让接口访问通，并没有在header中添加一些安全性高的属性比如cookie之类的。可以采用使用flutter 插件shelf_proxy进行代理服务器转发。因为如果访问后台接口出现跨域的话，是因为服务器限制了不允许跨域请求。所以我们只需要把远程服务器的接口请求代理到一个可以允许跨域的服务就可以访问了。

如下：

1.添加依赖

在pubspec.yaml文件中添加依赖

shelf_proxy: ^1.0.0

然后写一个代理服务的文件，随便你放哪儿吧，新开项目都可以，但是本身我们也只是本地调试会用，所以我自己就放在了当前项目下

 上图我放的位置，我怕有人问，反正就是自己随便放哪儿。

然后局在cors.dart文件中编写代理服务器代码：

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';

void main(List<String> arguments) async {

  var reqHandle = proxyHandler("https://xxx.com");//这儿就是你目标服务的地址

  /// 绑定本地端口，4500，转发到真正的服务器中
  var server = await shelf_io.serve(reqHandle, 'localhost', 4500);
  // 这里设置请求策略，允许所有
  server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
  server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);
  server.defaultResponseHeaders.add('Access-Control-Allow-Headers', '*');
  server.defaultResponseHeaders.add('Access-Control-Max-Age', 3600);//加这个是为了不会每次都检测跨域，然后总会有两次请求
  server.defaultResponseHeaders.add('Access-Control-Expose-Headers', '*');//加这个是为了能获取header里面的其他项
  print('Serving at http://${server.address.host}:${server.port}');
}

写好了之后，启动服务

很简单，选中这个之后点那个run的三角图标就可以启动服务了。然后你在run flutter web项目，就可以访问接口，并且成功拿到返回值了。

正如我之前所说，如果你的接口不需要在header里面加入一些鉴权的东西呀之类的，你可能并不能发现这个方法有什么不妥。但是这个方法只是让服务端接口允许跨域，但是并没有解决跨域的问题 ，但是实际上跨域是存在的，所以我们会出现获取不到cookie的问题。下面说说带cookie的请求怎么办

方法二：

带cookie跨域请求：前后端都需要进行设置：这个参考https://blog.youkuaiyun.com/qq_38128179/article/details/84956552    可以去看看了解一下，但是由于flutter dio没有给我们提供设置withCredentials的机会（也可能是我了解的浅显，没有注意，反正我找了一下，没有找到），于是我这边的解决方法就是让他不产生跨域。本地调试的时候让界面和服务器端的调用都在同一个域名和同一个端口下。于是我们就不可以在用flutter 自己的run了，因为这样字前端界面的端口是随机的，并且每次运行都不一样。废话不多说，下面是我的方法。

1、写一个服务放在flutter项目的web文件夹下，把前端和后台接口都代理到本地服务的同一个端口下

内容如下：

server.js

let http  = require('http')
let fs = require('fs')
let conifg = require('./proxy-conf')


let app = http.createServer ( function(request,response){
    let url = request.url
    if(request.url!=='/favicon.ico'){//清除第二次访问
        console.log("request:",request.url)
        //请求的数据是否存在代理
        for ( var key in conifg){

            if( url.indexOf(key) >-1 ){
                let info = conifg[key].target.split(':')
                let opt = {
                    protocol: info[0]+':',
                    host:    info[1].slice(2),
                    port:    info[2] || 80,
                    method:  request.method,//这里是发送的方法
                    path:    url,     //这里是访问的路径
                    json: true,
                    headers: request.headers
                }
                proxy( opt, response,request )//代理方法
                return;
            }

        }
        //正常的读取文件和其他资源加载
        fs.readFile( __dirname + ( url==='/' ? '/index.html':url ), function( err, data ){
            console.log("读取路径")
            if( err ){
                console.log( 'file-err',err )
            }else{
                console.log(data)
                response.end( data )
            }
        });
    }
} )

//代理转发的方法
function proxy( opt,res ,req){
    var proxyRequest = http.request(opt, function(proxyResponse) { //代理请求获取的数据再返回给本地res
        proxyResponse.on('data', function(chunk) {
            console.log( chunk.toString('utf-8') )
            res.write(chunk, 'binary');
        });
        //当代理请求不再收到新的数据，告知本地res数据写入完毕。
        proxyResponse.on('end', function() {
            res.end();
        });
        res.writeHead(proxyResponse.statusCode, proxyResponse.headers);
    });

    //data只有当请求体数据进来时才会触发
    //尽管没有请求体数据进来，data还是要写，否则不会触发end事件
    req.on('data', function(chunk) {
        console.log('in request length:', chunk.length);
        proxyRequest.write(chunk, 'binary');
    });

    req.on('end', function() {
        //向proxy发送求情，这里end方法必须被调用才能发起代理请求
        //所有的客户端请求都需要通过end来发起
        proxyRequest.end();
    });

}


app.listen(8000)
console.log('server is listen on 8000....')

 其中proxy-conf是我们的服务器转发的配置：贴一下我的代码，你们不用这样字，我是因为情况有点点特殊

proxy-conf.json

{
    "/visitProject/":{
        "target": "http://localhost:3034"
    },
    "/internal-api/":{
        "target": "http://localhost:3034"
    },
    "/workOrder/":{
        "target": "http://localhost:3034"
    },
    "/visitSale/":{
        "target": "http://localhost:3034"
    }

}

target是你得目标服务的地址。因为我本地写了一个node服，所以是本地的一个地址，大家可以写自己正常的想要调用的接口服务器地址，前面的键值，是我的后台服务有很多个路径，所以我都转发了一下，以登录为例，我的登录接口地址是http://localhost:3034/internal-api/auth/login然后我想要用我本地启动8000访问他，在如上设置之后，我们在代码里面写接口baseUrl的时候就应该是http://localhost:8000/internal-api/auth/login。以此类推吧，以上node端代码请教了我们前端同事。有什么见拙的地方，大家自己优化改一下吧。没有node环境的朋友们，启java服务也可以的

然后我们就可以线build一下我们的flutter web 项目，就正常的编译命令 flutter build web,然后再启动我们刚刚写的node服务node build/web/server.js，然后显示服务启动成功之后我们就可以通过本地加端口地址访问我们的页面了，比如我的就是http://localhost:8000。然后后面的接口正常调用，cookie也正常保存了。也可以几个bat，然后放到项目根目录下，然后直接执行build就可以了

，嗯。。。。这个就是我抄的网友现成的了https://blog.youkuaiyun.com/xfnbing/article/details/106522916

如下：

build_web.bat

@ECHO off
flutter build web

node_proxy_server.bat

@ECHO off
node build/web/server.js

build.bat

@ECHO off
call build_web
call node_proxy_server

希望能有更方便的方式！感谢其他博主有用的付出

以上，完结。