下面的代码在应用版本上运行在iOS设备上时表现良好,但当我在Chrome上使用来自beta频道的Web调试测试相同的代码时,遇到了CORS错误。
其他Stack Overflow的答案解释了如何通过服务器端文件解决项目中的CORS问题,但我完全不知道什么是服务器,也不知道如何处理他们的答案。Chrome控制台的错误信息如下:
[ Access to XMLHttpRequest at 'https://kapi.kakao.com/v1/payment/ready' from origin 'http://localhost:52700' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ]
所以,我想要做的就是仅通过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控制台仍然打印出相同的错误信息。奇怪的是,相同的代码在移动应用版本中可以成功请求。所以我认为这只是Flutter Web版本的问题。希望有人能够找出问题并建议一段纯Dart代码来解决我的main.dart中的问题!