how to fix flutter web http error making http request to a particular web server

Question

I am trying to make an HTTP request to 000webhost as below in my flutter web app. The first method is the same as the second, I only changed the URL. However, the first one works but the second does not work. Someone suggested adding more headers but I have no idea which headers to add.

// This method WORKS
getMethod()async{

  print("IN GET ....");
  String theUrl = 'https://jsonplaceholder.typicode.com/todos';
  var res = await http.Client().get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  //var res = await http.get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  var responsBody = json.decode(res.body);
  print(responsBody);
  return responsBody;
}



// This DOES NOT WORK
getMethod()async{
  print("IN GET ....");
  String theUrl = 'https://funholidayshotels.000webhostapp.com/fetchData.php';
  var res = await http.Client().get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  //var res = await http.get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  var responsBody = json.decode(res.body);
  print(responsBody);
  return responsBody; 
}

Question was framed nicely. Before coming through this question, I thought it was some issue with flutter packages. This question motivated me to make changes in my backend. — Sarvesh Dalvi
– Sarvesh Dalvi, Commented Mar 16, 2021 at 15:24

Norbert · Accepted Answer · 2019-05-19 16:52:21Z

3

After struggling with this for some time I figured out the problem was from the server side I had to add Header add Access-Control-Allow-Origin "*" to .htaccess on 000webhost And This solves it for me

answered May 19, 2019 at 16:52

Norbert

7,81015 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eradicatore Over a year ago

flask-cors.readthedocs.io/en/latest . I used this when I was using flask as the server

Sarvesh Dalvi Over a year ago

User the cors npm package to achieve this on node or express server. Link for package : npmjs.com/package/cors . You can use this as a middleware by doing :const cors = require("cors"); app.use(cors())

Norbert · Accepted Answer · 2019-11-10 22:08:49Z

2

You can also Add the code below to your php file like so:

    <?php
    require('connection.php');
    header("Access-Control-Allow-Origin: *");
    ....
    code goes here
    ....
    ?>

I Tried this on LocalHost and it worked

answered Nov 10, 2019 at 22:08

Norbert

7,81015 gold badges45 silver badges68 bronze badges

Collectives™ on Stack Overflow

how to fix flutter web http error making http request to a particular web server

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related