如何根据window.location.protocol设置http或https

Question

我正在开发 flutter web application.I 想要防止 CORS 错误，无论我的 API 端点是在 https:// 还是 http:// 上运行我如何修改我的端点 Class 下面根据当前设置 http 或 https window.location.protocol? 这是我的服务 class:

import 'package:universal_html/html.dart';

class ApiEndPoint {
  Location currentLocation = window.location;
  static
  const host = 'api.xyz.com';
  static
  const http = 'http://';
  static
  const https = 'https://';
  static String baseUrl = "";
  // get base {
  //   if (currentLocation.protocol == 'https') {
  //     return baseUrl = "$https$host/api";
  //   } else if (currentLocation.protocol == 'http') {
  //     return baseUrl = "$http$host/api";
  //   }
  // }
}

Answer 1

我不确定我是否理解你的问题：

如果 currentLocation.host != apihost（例如 currentLocation 可能是 https://app.xyz.com），您无论如何都必须在 API 主机上允许 CORS。那么为什么您的 API 仍然支持不安全的 http:// 协议。从不安全的网站访问 https:// 资源没有问题。始终使用 https://api.xyz.com 并允许 CORS 来源 http://app.xyz.com 和 https://app.xyz.com
如果 currentLocation.host == apihost 只需从您的 apirequests 中删除 protocol://host 部分并访问 /api/...。浏览器（resp.webview）无论如何都会添加正确的协议和主机...

除此之外，您目前的做法有什么问题？它应该工作。但是您可以将其简化为

get base {
  return baseUrl = "${currentLocation.protocol}$host/api"
}

并放弃 const static http 和 const static https 字符串常量。

我对 Flutter 应用程序架构没有任何经验，也不了解您的应用程序的架构。所以我不知道是否可以让 ApiEndPoint 的多个实例具有不同的 window.locations。这可能会导致您的 static String baseUrl 出现问题，因为 static 变量在 class 的所有实例之间共享。所以当你同时有不同的window.location时，这会不一致。所以也许你应该放弃 baseUrl 变量，只做

get base {
  return "${currentLocation.protocol}$host/api"
}

因为这将始终具有当前实例位置的正确协议。

编辑关于您的评论：

当然你不能以静态方式访问base 属性。即 ApiEndPoint.base 不会工作，因为 base 不是 static property。所以原则上你有 2 个选项（取决于你的架构）

将base（当然还有currentLocation）改为static。然后你可以通过 ApiEndPoint.base

访问它

 static Location currentLocation = window.location;
 static get base {
   return "${currentLocation.protocol}$host/api"
 }

创建您的 ApiEndPoint class 实例，并仅通过该实例访问 base 属性
```
 final api = ApiEndPoint();
 ...
 final baseUrl = api.base;
```

无论如何，您应该阅读 static 关键字 ...

如何根据window.location.protocol设置http或https

How to set http or https based on window.location.protocol

api

window.location

dart

flutter-web