如何仅用dart代码解决颤动web api cors错误？
似乎CORS错误在web领域是一个众所周知的问题。但是我第一次尝试flutter web，我遇到了严重的错误。
下面的代码在iOS设备上运行时，在应用程序版本中运行得很好，但当我从测试版通道使用web调试在Chrome上测试相同的代码时，它遇到了CORS错误。
其他的stackoverflow解答解释了如何使用他们项目的服务器端文件来解决CORS问题。但我完全不知道什么是服务器，以及如何处理他们的答案。来自Chrome控制台的错误消息如下
CORS策略阻止了对“”https://kapi.kakao.com/v1/payment/ready‘from origin“”http://localhost:52700’处的XMLHttpRequest的访问:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“”Access - control -Allow-XMLHttpRequest“”标头。“”
所以，我想做的就是用DART代码来解决上面的'Access-Control-Allow-Origin header‘问题！下面的代码是我试图用我的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版本的问题。
希望有人能解决这个问题，只建议使用dart代码来解决我的main.dart中的问题！！感谢您阅读[：
回答 5
Stack Overflow用户
发布于 2021-03-31 06:35:51
1-转到flutter\bin\cache并删除名为: flutter_tools.stamp的文件
2-转到flutter\packages\flutter_tools\lib\src\web并打开文件chrome.dart。
3-查找'--disable-extensions‘
4-添加'--disable-web-security‘
Stack Overflow用户
发布于 2021-04-14 17:31:34
像node js或django这样的服务器端引擎确实需要通过一堆外部apis来处理flutter web。实际上，当我们尝试使用内部api时，由于与端口号差异相关的CORS机制，出现相同CORS错误的可能性很高。
SO贡献者推荐使用chrome扩展以避免CORS错误的步骤和答案，但这对用户来说实际上并不酷。所有用户都应该下载浏览器扩展才能使用我们的单个网站，如果我们使用真正的服务器引擎，就不会有这样的网站。
据我所知，CORS来自浏览器，所以我们的flutter ios和android应用程序使用相同的api代码，不会给出这些CORS错误。当我第一次在flutter web上遇到这个错误时，我相信我可以在我的应用程序代码行中处理CORS。但对于用户和长期开发计划来说，这实际上不是一种健康的方式。
希望所有flutter web新手都能理解，web对我们来说是一个相当广阔的领域。即使我也是新手，我还是强烈推荐所有来自1.22.n稳定版的flutter web开发人员来学习像node js这样的服务器端引擎。值得一试。
如果你已经到了我的自我回答的这一行，这里有一个使用node js的flutter web的简单指南。Flutter web处于稳定通道，但对于像我这样的新手来说，所有这些必要的基础设施都还没有完全准备好。所以，当你第一次进入web领域时要小心，希望你重新检查所有的条件和要求，看看你是否真的需要你的flutter应用程序的web版本，以及你是否真的需要用flutter来做这项工作。我的回答是肯定的
Stack Overflow用户
发布于 2021-07-17 17:53:13
如果您运行Spring Boot服务器，请将"@CrossOrigin“添加到您的控制器或服务方法中。
@CrossOrigin
@PostMapping(path="/upload")
public @ResponseBody ResponseEntity<Void> upload(@RequestBody Object object) {
// ...
}我知道这个问题明确要求“使用dart代码”的解决方案，但我无法使用dart代码修复该异常(例如，通过更改标头)。
https://stackoverflow.com/questions/65630743
复制相似问题
腾讯云开发者
