web_dev_proxy_shelf

Description:

web dev proxy shelf

a web dev proxy server that has implement request cors and cookie cors, base on shelf_proxy
Features #

Modify response headers and cookie for cors in web dev

Getting started #
step1 #
Define your target host and local proxy host and port in a dart file ,just like :
class LocalProxyConfig{

static String targetUrl = 'https://navi-api.xxx.tech';
static const String localHost = 'localhost';
static const int localPort = 8033;

static const String localProxyUrlWeb = "http://$localHost:$localPort";

}
copied to clipboard
step2 #
define a main method in another dart file:
import 'package:web_dev_proxy/src/shelf_proxy_for_web_dev.dart';

import 'proxy_web_local_config.dart';

Future<void> main() async {
await startLocalProxyServerForWebDebug(LocalProxyConfig.localHost,LocalProxyConfig.localPort,LocalProxyConfig.targetUrl,true);
}
copied to clipboard
step3 #
Run the main method in step2

Will print:

Proxying at http://localhost:8033 for https://navi-api.xxx.tech
copied to clipboard
step4 #
use LocalProxyConfig.localProxyUrlWeb as your base url in project when platform is web.
what did we do in the proxy #
modify headers to allow request cros #

just like what you will do in nginx when release in web

// 修改响应头
//有时后台写了Access-Control-Allow-Origin,那么server.defaultResponseHeaders的设置就会无效
//if("OPTIONS" == (clientResponse?.request?.method??"")){
Map<String, String> headers = clientResponse.headers;
//不能同时多个
headers.remove('access-control-allow-origin');
headers.remove('access-control-allow-methods');
headers.remove('access-control-allow-headers');
headers.remove('access-control-expose-headers');
headers.remove('access-control-max-age');
headers.remove('access-control-allow-credentials');



//你请求什么,就允许什么
//access-control-request-headers 这个是chrome加了,所以在request!.headers里取不到
//Request header field app-version is not allowed by Access-Control-Allow-Headers in preflight response.
//Map<String, String> reqeustHeaders = clientResponse!.request!.headers!;
String headerStr = clientResponse!.request!
.headers['access-control-request-headers'].toString();
//预检请求不会携带额外的header,所以下面拼接header没有鸟用, 要用access-control-request-headers取
//reqeustHeaders.forEach((key, value) { headerStr = headerStr+","+key; });
//access-control-request-headers

if (headerStr == "null") {
headerStr = "*";
}
clientResponse.headers['Access-Control-Allow-Headers'] = headerStr;
//clientResponse.headers['Access-Control-Allow-Headers'] = "*";//预检请求里,['Access-Control-Allow-Credentials'] = 'true'时 不能用*
clientResponse.headers['Access-Control-Allow-Methods'] = "*"; //GET,POST,PUT,OPTIONS
clientResponse.headers['Access-Control-Expose-Headers'] = headerStr;
clientResponse.headers['Access-Control-Max-Age'] = '36000'; //如果chrome开启了禁用缓存,那么每次都会发预检请求
clientResponse.headers['Access-Control-Allow-Credentials'] = 'true';
//预检请求: 设置了-Allow-Credentials'] = 'true'时,两个限制:
// Access-Control-Allow-Origin'] 不能为 "*" -Allow-Headers'] = "*"

//clientResponse.headers['Access-Control-Allow-Origin'] = "*";
String original = clientResponse!.request!.headers["Referer"].toString();
if(original == "null"){
original = "*";
}
if (original.endsWith("/")) {
original = original.substring(0, original.length - 1);
}
clientResponse.headers['Access-Control-Allow-Origin'] = original;
//The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
// The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

copied to clipboard
modify set-cookie header #
void transferCookies(http.StreamedResponse clientResponse,String localHost) {
String? cookie = clientResponse.headers['set-cookie'];
if (cookie == null || cookie.isEmpty) {
return;
}
//服务器要发送多个 cookie，则应该在同一响应中发送多个 Set-Cookie 标头。
Cookie cookie2 = Cookie.fromSetCookieValue(cookie);
cookie2.secure = true;
cookie2.httpOnly = false;
cookie2.domain = localHost;
clientResponse.headers['set-cookie'] = cookie2.toString() + ";SameSite=None;";

print("reset set-cookie header from $cookie to \n ${clientResponse.headers['set-cookie']}\n");
}
copied to clipboard
Thanks #
https://pub.dev/packages/shelf_proxy
跨域资源共享 CORS 详解
浏览器同源政策及其规避方法