【发布时间】：2021-04-14 06:19:57
【问题描述】：
似乎 CORS 错误在网络领域是众所周知的问题。但我第一次尝试使用 Flutter Web 时遇到了严重错误。
下面的代码在 iOS 设备上运行时在应用程序版本中运行良好，但是当我在 Chrome 上通过 beta 通道的 web 调试测试相同的代码时，遇到了 CORS 错误。
其他 stackoverflow 答案解释了如何使用其项目的服务器端文件解决 CORS 问题。但我完全不知道什么是服务器以及如何处理他们的答案。来自 Chrome 控制台的错误消息如下
[ CORS 策略已阻止从源“http://localhost:52700”访问“https://kapi.kakao.com/v1/payment/ready”处的 XMLHttpRequest：对预检请求的响应不通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 ]
所以，我要做的是仅使用 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 版本中成功请求。所以我认为这只是flutter WEB VERSION的问题。
希望有人能解决这个问题并建议 only-dart 代码来解决我的 main.dart 中的问题！感谢您阅读[：
【问题讨论】：
-
在这种情况下，我认为您应该在服务器端启用它。您是否尝试过
ngrok为您的应用程序提供服务，看看它是否可以这样工作？可能是服务器不允许localhost。 -
这是小问题。现在我知道为什么网络开发人员会为我的问题按下拇指。我在带有关键字“flutter with node js”的中等文章之后添加了简单的节点 js，它运行良好。我们需要服务器端附加组件来使 Flutter Web 与这些 api 一起工作。希望来自 Flutter 1.22.n 的 web 新手明白，我们确实需要像节点引擎这样的服务器来使用 flutter web 的 api
-
这可能是您正在寻找的解决方案stackoverflow.com/a/37765371/13758642
标签： api flutter http dart request