In the previous part, DIO initiated network requests and automatic cookie management, but the operation mode was native. If you run on the Web, there are problems, starting with cross-domain problems

So let’s solve this problem

First, deploy web artifacts to Nginx

1. We change the baseUrl in the project to the IP address of the server to be deployed:

BaseUrl = "http://81.68.216.56:80/web_dev";Copy the code

2. Run the build web command to obtain the web folder under the build directory and upload the web folder to the WWW directory of the server (take the Tencent cloud server as an example).

3, modify the nigix configuration file on the server and add the following code

server
    {
        listen 80;
        server_name 81.68216.. 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;
    }
Copy the code

Nginx proxies to www.wanandroid.com/ when the accessed address matches web_dev/. This solves the cross-domain problem through reverse proxy.

Second, custom cookies: after deployment to Nginx, our cookies are automatically managed through the login interface; But what if our pages are accessible to others, and we don’t want them to log in again?

1. First of all, the URL we provide looks like this:

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

When someone visits our homePage and carries a valid cookie, we need to receive the cookie and carry the cookie when requested by the Internet

2. Receive cookies: in the build method of App

var defaultRoute = window.defaultRouteName; Uri route = Uri.parse(defaultRoute); cookie = route.queryParameters["cookie"]; if(cookie ! Cookiemanage. addCookie("token_pass=" + cookie!) ; debugPrint(cookie); }Copy the code

3, save the cookie:

I – Add dependency libraries for JS interaction

Js: ^ 0.6.3Copy the code

II – Add the web_plugin.js file as follows

Function _addCookie(cookie){document.cookie = cookie; }Copy the code

III – In index.html, add the web_plugin.js file

<script src="web_plugin.js" type="application/javascript"></script>
Copy the code

IIII – Add the cookiemage.dart file as follows

import 'dart:async'; import 'package:js/js.dart'; @JS() external void _addCookie(String cookie); Class CookieManage {static Future<String> addCookie(String cookie) async {_addCookie(cookie); return cookie; }}Copy the code

V- In the App, call the cookiemanage. addCookie method to save the cookie

Cookiemanage. addCookie("token_pass=" + cookie!) ;Copy the code

4, at this point, you can directly access the homoPage page and access the interface you need to log in to through the following address

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

5. Conclusion:

The code above that saves cookies actually ends up calling document.cookie = cookie; Cookie is created. It’s a little convoluted