上篇，讲了下dio建议网络恳求，以及cookie的主动办理，但运转办法是native运转；假如运转在web上，就会出现问题，首先就是跨域问题

FlutterWeb-06-处理跨域和自定义cookie
下面咱们来解决这个问题

一，布置web产品到nginx

1，咱们将项目中的baseUrl修改为即将布置的服务器ip地址：

baseUrl = "http://81.68.216.56:80/web_dev";

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

FlutterWeb-06-处理跨域和自定义cookie
3，修改服务器上nigix的配置文件，增加下面的代码

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

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="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，进程有点绕