如何解决flutter web api cors错误只用dart代码？

Question

CORS错误似乎是web领域中众所周知的问题。但我第一次尝试了FlitterWeb，我遇到了严重的错误。

下面的代码在iOS设备上运行时在应用程序版本中运行良好，但当我在Chrome上通过beta频道的web调试测试相同的代码时，它遇到了CORS错误。

其他stackoverflow的回答解释了如何用他们项目的服务器端文件解决CORS问题。但是我完全不知道什么是服务器的东西，以及如何处理他们的答案。来自控制台Chrome错误消息如下

[访问XMLHttpRequest在'https://kapi.kakao.com/v1/payment/ready'从起源'http://localhost:52700'已被阻止的CORS策略：响应飞行前请求不通过权限改造检查：没有'访问控制-允许-起源'头存在于请求的资源。]

所以，我想做的是解决上面的访问-控制-允许-起源头问题只与DART代码！下面的代码是我试图用我的main.dart.来解决这些问题的

onPressed: () async {
      var res =
          await http.post('https://kapi.kakao.com/v1/payment/ready', encoding: Encoding.getByName('utf8'), headers: {
        'Authorization': 'KakaoAK $_ADMIN_KEY',
        HttpHeaders.authorizationHeader: 'KakaoAK $_ADMIN_KEY',
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE, HEAD",
      }, body: {
        'cid': 'TC0ONETIME',
        'partner_order_id': 'partner_order_id',
        'partner_user_id': 'partner_user_id',
        'item_name': 'cool_beer',
        'quantity': '1',
        'total_amount': '22222',
        'vat_amount': '2222',
        'tax_free_amount': '0',
        'approval_url': '$_URL/kakaopayment',
        'fail_url': '$_URL/kakaopayment',
        'cancel_url': '$_URL/kakaopayment'
      });
      Map<String, dynamic> result = json.decode(res.body);
      print(result);
    },

尽管我实际上有一个标题“Access Control Allow Origin”：“*”，这是大多数其他答案所推荐的，但Chrome控制台还是显示了相同的错误消息。奇怪的是，同样的代码在mobileApp版本中成功地发出了请求。所以我认为这是颤振网络版的唯一问题。

希望有人能解决这个问题，并在我的main.dart中建议只有省道代码来解决这个问题！！感谢您的阅读[：

Answer 1

如果运行Spring Boot服务器，请将“@CrossOrigin”添加到控制器或服务方法中。

@CrossOrigin
@PostMapping(path="/upload")
public @ResponseBody ResponseEntity<Void> upload(@RequestBody Object object) {
    // ...
}

我知道这个问题明确要求只使用“dart代码”来解决，但我无法使用dart代码修复异常（例如，通过更改标题）。

Answer 2

像节点js或django这样的服务器端引擎确实需要使用带有一堆外部api的flutter web。实际上，当我们尝试使用内部api时，由于与端口号差异相关的CORS机制，很有可能出现相同的CORS错误。

据我所知，CORS来自浏览器，所以我们的Flight ios和android应用程序使用相同的api代码，不会出现CORS错误。当我第一次在FlatterWeb上遇到这个错误时，我相信我可以在我的应用程序代码行中处理CORS。但对于用户和长期开发计划来说，这实际上不是一种健康的方式。

希望所有的网络新手都明白，网络对我们来说是一个非常广阔的领域。尽管我在这里也是新手，但我还是强烈推荐所有1.22.nStable中的Flitter web开发人员学习node js等服务器端引擎。值得一试。

如果你深入到我的自我答案，这里有一个关于节点js的flutter web的简单指南。Flutter web是稳定的频道，但所有这些必要的基础设施还没有完全准备好像我这样的新手。所以当你第一次进入web领域时要小心，希望你重新检查所有的条件和要求，看看你是否真的需要你的flutter应用的web版本，以及你是否真的需要用flutter做这项工作。我的回答是肯定的，哈哈

https://blog.logrocket.com/flutter-web-app-node-js/

Answer 3

1-转到flatter\bin\cache并删除名为：flatter\u tools.stamp的文件

2-转到flatter\packages\flatter\u tools\lib\src\web并打开文件chrome.dart。

3-查找“--禁用扩展”

4-添加“--禁用web安全”