如何处理 web 抖动的 cors

Posted 2023-02-23

【中文标题】如何处理 web 抖动的 cors

【英文标题】：How to handle cors for web flutter

【发布时间】：2020-12-29 17:54:12

【问题描述】：

我一直在努力解决flutter 的PWA 项目中的cors 问题，我正在关注这个

how to solve flutter CERTIFICATE_VERIFY_FAILED error while performing a POST request?.

我正在使用universal_io 包，因为 dart.io 不能用于 web...这是代码的一部分

HttpClient client = new HttpClient();
      client.badCertificateCallback =
          ((X509Certificate cert, String host, int port) => true);
      String url = 'https:xxxx.php';
      Map map = 
        "a": "a",
        "b": "b"
      ;
      HttpClientRequest request = await client.postUrl(Uri.parse(url));
      request.headers.set('content-type', 'application/json');
      request.add(utf8.encode(json.encode(map)));
      if (request is BrowserHttpClientRequest) 
        request.credentialsMode = BrowserHttpClientCredentialsMode.include;
      
      HttpClientResponse response = await request.close();
      print(response.toString());
      String reply = await response.transform(utf8.decoder).join();
      print(reply);

但我得到这样说的错误

--------------------------------------------------------------------------------
BrowserHttpClient received an error from XMLHttpRequest (which doesn't tell
reason for the error).
HTTP method:        POST
URL:                https://www.rscm.co.id/apirscm/v2.php
Origin:             http://localhost:64121
Cross-origin request!
XmlHttpRequest 'credentials mode' is enabled.
Did the server send the following mandatory headers?
  * Access-Control-Allow-Credentials: true
  * Access-Control-Allow-Origin: http://localhost:64121
    * In credentials mode, '*' would fail!
  * Access-Control-Allow-Methods: POST

有没有办法解决这个问题？

【问题讨论】：

我认为 Dio 包在网络上解决了这个问题..但仍然不确定

嗨，谢谢你的建议，我也会尝试使用 Dio 包

【参考方案1】：

您可以在 chrome 的调试模式下使用本地主机服务器，方法如下： 在终端中打开它。

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/Users/i0868/Desktop/Chrome" --disable-web-security

【讨论】：

您好，谢谢您的回答，我会尝试一下，我想知道....是否仅适用于调试模式，并且在我部署我的 Web 项目后...我还在cors 问题？

是的，它有可能会发生......你必须将你的后端配置为 Allow-Control-Allow-Origin......我们在我们的团队中做了同样的事情......我什么都没有无法从颤振侧完成

好吧，让我先试试你的答案……非常感谢你的帮助

open 不是内部或外部命令、可运行程序或批处理文件。

【参考方案2】：

您可以执行以下操作来启用凭据模式：

final httpClientRequest = MyHttpClientRequest;
if (httpClientRequest is BrowserHttpClientRequest) 
  httpClientRequest.credentialsMode = BrowserHttpClientCredentialsMode.include;

但更喜欢使用这个库 universal_io 而不是 dart.io

【讨论】：

感谢您的回答，我最终将后端配置为 Allow-Control-Allow-Origin 并且效果很好