如何解决github代码空间上的flutter web CORS错误?

n3ipq98p  于 2023-04-13  发布在  Flutter
关注(0)|答案(2)|浏览(159)

我是Flutter Web和GitHub Codespaces的初学者。
在调用http GET API时发生了一个错误,该错误应该是CORS错误。
我必须使用代码空间远程工作,终端环境是Ubuntu 20.04.4 LTS。
Chrome没有安装在那里,所以我在代码空间中打开端口,并通过浏览器连接到它。
请希望你弄清楚我如何能收到我的请求的响应。
谢谢!

代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;

class TickerController extends GetxController {
  RxString text = 'Idle'.obs;

  getTicker() async {
    text('Start');
    var url = Uri.parse('https://api.bithumb.com/public/ticker/ETH_BTC');
    var response = await http.get(url);
    text(response.body);
  }
}

class HomePage extends StatelessWidget {
  final TickerController controller;

  HomePage({Key? key})
      : controller = TickerController(),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            child: const Text('Run'),
            onPressed: controller.getTicker,
          ),
          Obx(() {
            return Text(controller.text.value);
          }),
        ],
      ),
    );
  }
}

flutter run -d web-server --web-hostname=0.0.0.0

试试

将代码空间端口可见性设置为“public”
添加请求标头

var response = await http.get(url, headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Credentials': 'true',
  'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token, locale',
  'Access-Control-Allow-Methods': 'GET, POST',
});

使用python http.server运行

from http.server import HTTPServer, SimpleHTTPRequestHandler

class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', '*')
        self.send_header('Access-Control-Allow-Methods', 'GET, POST')
        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
        return super(CORSRequestHandler, self).end_headers()

server = HTTPServer(('localhost', 8000), CORSRequestHandler)
server.serve_forever()

并构建flutter项目flutter build web,运行python服务器../build/web$python server.py

错误

58wvjzkj

58wvjzkj1#

要将CodeSpaces端口可见性设置为公共,请在运行Codespaces时转到VSCode中的“ports”选项卡。右键单击导出Web服务器的端口(可能是端口3000),并将“Port Visibility”设置为“Public”。Location of ports tab in VSCode
使用此功能,您可以使用Dart-Debug Chrome扩展在Chrome浏览器上调试Flutter应用。

bqf10yzr

bqf10yzr2#

OPTIONS添加到Access-Control-Allow-Methods响应头中,请参阅Preflight request的详细信息。Access-Control-Allow-*头用于响应,这意味着客户端不应将它们包含到请求中。

相关问题