Not able to fetch data from my own api in flutter

Question

I am not able to fetch data from my own api in flutter but yes I am able to fetch data from fake api such as http://jsonplaceholder.typicode.com/posts/

my code

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RequestPage(),
    );
  }
}

class RequestPage extends StatefulWidget {
  const RequestPage({Key? key}) : super(key: key);

  @override
  State<RequestPage> createState() => _RequestPageState();
}

class _RequestPageState extends State<RequestPage> {
  Future<void> getdata() async {
    var res = await http
        .get(Uri.parse("https://myurl.com/api/"));
    print(res.body);
  }

  late String username;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                onPressed: getdata,
                child: Text("Make A Request"),
              ),
              Text("Response")
            ],
          ),
        ),
      ),
    );
  }
}

my api

<?php


header("Access-Control_Allow_Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Content-type:application/json;charset=utf-8"); 
header("Access-Control-Allow-Methods: GET");

$conn  = mysqli_connect("localhost", "root", "", "api");
$sql = "SELECT * FROM login;";
$result = mysqli_query($conn,$sql);
header('Content-Type:application/json');
if(mysqli_num_rows($result)>0){
    while($row=mysqli_fetch_assoc($result)){
        $arr[] = $row;
    }
    echo json_encode($arr);
}

?>

output that i want

[
{
id: "1",
username: "admin",
password: "123456",
},
]

Error that i am getting

Error: XMLHttpRequest error. dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28 get current packages/http/src/browser_client.dart 69:22 dart-sdk/lib/async/zone.dart 1687:54 runUnary dart-sdk/lib/async/future_impl.dart 160:18 handleValue dart-sdk/lib/async/future_impl.dart 767:44 handleValueCallback dart-sdk/lib/async/future_impl.dart 796:13 _propagateToListeners dart-sdk/lib/async/future_impl.dart 593:7 [_complete] dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue dart-sdk/lib/async/stream.dart 1288:7 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39 dcall dart-sdk/lib/html/dart2js/html_dart2js.dart 37254:58 at Object.createErrorWithStack (http://localhost:56929/dart_sdk.js:5076:12) at Object._rethrow (http://localhost:56929/dart_sdk.js:40477:16) at async._AsyncCallbackEntry.new.callback (http://localhost:56929/dart_sdk.js:40473:13) at Object._microtaskLoop (http://localhost:56929/dart_sdk.js:40330:13) at _startMicrotaskLoop (http://localhost:56929/dart_sdk.js:40336:13) at http://localhost:56929/dart_sdk.js:35811:9

please help me

That looks more like a php problem. Did you check (for example with a browser since it's a simple GET call) what your output actually looks like? — nvoigt, Jan 21 '22 at 14:27
This is a CORS error caused by a typo in your header here: `header("Access-Control_Allow_Origin: *");` — Richard Heap, Jan 21 '22 at 14:39

score 0 · Answer 1 · answered Jan 21 '22 at 14:59

0

That flutter code looks right.

Like @Richard pointed out header("Access-Control_Allow_Origin: *") should be header("Access-Control-Allow-Origin: *");.

Also double check that you're replacing "https://myurl.com/api/" with your correct URL.

answered Jan 21 '22 at 14:59

Assaf

668
5
5

1

thanks for helping me but the real problem is of chrome i found the solution of it https://stackoverflow.com/questions/65630743/how-to-solve-flutter-web-api-cors-error-only-with-dart-code – Abhinav Jan 21 '22 at 15:30

Not able to fetch data from my own api in flutter

1 Answers1