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

I am working on a flutter web application.I want to prevent the CORS error whether my API Endpoint runs on https:// or http:// How can I modify my EndPoint Class below to set http or https based on the current window.location.protocol? Here is my service 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";
  //   }
  // }
}

CodePudding user response：

I'm not sure I understand your problem:

If currentLocation.host != apihost (for instance currentLocation could be https://app.xyz.com) you'll have to allow CORS on your API host anyways. Why then still support unsecure http:// protocol for your API. It's no problem to access https:// resources from an unsecured website. Just always use https://api.xyz.com and allow CORS origins http://app.xyz.com and https://app.xyz.com
If currentLocation.host == apihost just ditch the protocol://host part from your apirequests and just access /api/.... The browser (resp. webview) will add the correct protocol and host anyways ...

Other than that, what's wrong with your current approach? It should work. But you could probably simplify it to

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

and ditch the const static http and const static https string constants.

I don't have any experience with flutter app architecture, nor do I know the architecture of your app. So I don't know whether it's possible to have multiple instances of that ApiEndPoint with different window.locations. This will probably lead to a problem with your static String baseUrl, as a static variable is shared among all instances of a class. So when you have different window.locations at the same time, this will be inconsistent. So maybe you should ditch the baseUrl variable alltogether and just do

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

as this will always have the correct protocol for the location of the current instance.

EDIT Regarding your comment:

Of course you cannot access the base property in a static way. Ie ApiEndPoint.base won't work, because base is not a static property. So in principle you have 2 options (depending on your architecture)

Change base (and of course also currentLocation) to be static. Then you can access it vie ApiEndPoint.base

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

Create an instance of your ApiEndPoint class, and access the base property only via that instance
```
 final api = ApiEndPoint();
 ...
 final baseUrl = api.base;
```

In any case, you should read about static keyword ...