FlutterWeb-06-处理跨域和自定义cookie

上篇，讲了下dio发起网络请求，以及cookie的自动管理，但运行方式是native运行；如果运行在web上，就会出现问题，首先就是跨域问题

下面我们来解决这个问题

一，部署web产物到nginx

1，我们将项目中的baseUrl修改为将要部署的服务器ip地址：

baseUrl = "http://81.68.216.56:80/web_dev";
复制代码

2，执行flutter build web命令后，得到build目录下的web文件夹，将web目录上传到服务器的www目录下(以腾讯云服务器为例)

3，修改服务器上nigix的配置文件，添加下面的代码

server
    {
        listen 80;
        server_name 81.68.216.56;
        index index.html index.htm index.php;
        root  /www/web;
        #error_page   404   /404.html;
        include enable-php.conf;
        
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        # location ~ /\.
        # {
        #     deny all;
        # }
         location /web_dev/ 
        {
		        rewrite ^/b/(.*)$ /$1 break;
		        proxy_pass https://www.wanandroid.com/;
	      }
         
        access_log  /www/wwwlogs/access.log;
    }
复制代码

说明：当访问的地址匹配到web_dev/时，nginx就会代理到www.wanandroid.com/
这样就通过反向代理，解决了跨域问题；

二， 自定义cookie：部署到nginx后，我们的cookie都是通过登陆接口，然后自动管理的；但如果我们的页面提供给别人访问，而且不希望别人再调登陆接口，该怎么处理呢？

1，首先我们提供的url大概是这样：

http://81.68.216.56:80/#/homePage?cookie=e546b3c26a214ff

即别人访问我们的homePage页面，并携带有效的cookie，这时我们就需要接收cookie，并在网络请求的时候，携带cookie

2，接收cookie：在App的build方法中

var defaultRoute = window.defaultRouteName;
Uri route = Uri.parse(defaultRoute);
cookie = route.queryParameters["cookie"];
if(cookie != null) {
  //将cookie保存进网页的Cookies中
  CookieManage.addCookie("token_pass=" + cookie!);
  debugPrint(cookie);
}
复制代码

3，保存cookie：

I – 添加js交互的依赖库

js: ^0.6.3
复制代码

II – 添加web_plugin.js文件，代码如下

//保存cookie
function _addCookie(cookie){
    document.cookie = cookie;
}
复制代码

III – 在index.html中，倒入web_plugin.js文件

<script src="https://juejin.cn/post/web_plugin.js" type="application/javascript"></script>
复制代码

IIII – 添加CookieManage.dart文件，代码如下

import 'dart:async';
import 'package:js/js.dart';
@JS()
external void _addCookie(String cookie);
///web - 保存cookie
class CookieManage {
  static Future<String> addCookie(String cookie) async {
    _addCookie(cookie);
    return cookie;
  }
}
复制代码

V-在App中，调用CookieManage.addCookie方法，保存cookie

//将cookie保存进网页的Cookies中
CookieManage.addCookie("token_pass=" + cookie!);
复制代码

4，这时候可以通过，下面这样的地址，直接访问homoPage页面，并访问需要登陆的接口

http://81.68.216.56/#/homePage?cookie=5d9b90bcb70640183e09d1e755ead823

5，总结：

上面保存cookie的代码，实际最终是调用了document.cookie = cookie;创建了cookie，过程有点绕