如何让 HTTP 请求在 Flutter web 中工作？

Question

我正在尝试从我的站点获取数据 link：http://mrmatjar.com/kaka/dataaza.php

这是我的代码

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:mrmatjar_afflite/shopobj.dart';
class Operations{
 static Future<List<ShopObj>> loly() async{
    List<ShopObj> ak= new List<ShopObj>();
      var res = await http.get(Uri.encodeFull("https://mrmatjar.com/kaka/dataaza"),headers: {"Accept":"application/json"});

    print(res);
    var v = json.decode(x.body);
    for(var h in v){
        ak.add(new ShopObj(h['title'], h['cost'], h['earn'], h['image']));
    }
    return ak;
  }
}

但它不起作用。当我运行 Web 应用程序中断时，当我使用 Break point 时，它显示文件调用 blinding.dart

Answer 1

欢迎来到堆栈溢出:)。

第一个：

我发现你的代码中有一些拼写错误。

var v = json.decode(x.body); 应该是

var v = json.decode(res.body);

第二个：

修复上述问题后，您可能会遇到 Cross Origin Request(CORS) 错误，这可能是因为您尚未在服务器中进行设置。特别是如果你的 flutter web 应用程序不在与你 api 是运行的服务器相同的域中运行。即使它在同一台机器上，您也必须允许来自特定域和端口的请求。如果您不知道 CORS，您可以阅读 here.

第三个：

正如我所见，您在处理响应时未检查响应的 statusCode，当您尝试解码响应时它仍然会导致错误。

我这里有一个基于 DOGs public api 的简单运行示例。

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

class HttpRequestDemo extends StatefulWidget {
  @override
  _HttpRequestDemoState createState() => _HttpRequestDemoState();
}

class _HttpRequestDemoState extends State<HttpRequestDemo> {
  String imageUrl = "";

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Center(
          child: Image.network(
            imageUrl,
            height: MediaQuery.of(context).size.height / 3,
            width: MediaQuery.of(context).size.width / 3,
          ),
        ),
        FloatingActionButton(
          child: Icon(Icons.cloud_download),
          onPressed: () {
            fetchData();
          },
        )
      ],
    ));
  }

  fetchData() async {
    final res = await http.get("https://dog.ceo/api/breeds/image/random");

    if (res.statusCode == 200) {
      var v = json.decode(res.body);
      setState(() {
        imageUrl = v['message'];
      });
    }
  }
}

每次按下浮动操作按钮时，此应用程序都会显示一张新的狗照片，如下所示，这是基于 api.

的响应

Answer 2

我也遇到了同样的问题。它与CORS有关。我把这个添加到我的后端服务器

sudo a2enmod headers

sudo nano /etc/apache2/mods-enabled/headers.conf

修改如下：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

然后重启apache2

sudo service apache2 restart

如何让 HTTP 请求在 Flutter web 中工作？

How to make HTTP Request work in Flutter web?

http

flutter

dart

httprequest

flutter-web