How to make HTTP request to In Flutter Web

Question

I was trying my hands on flutter web. I tried to connect a simple flutter web app I created to mysql database and localhost using the http package. However I dont get any data returned from the request method. When I tried to print out snaphot.error I got this: XMLHttpRequest error. I have this method in a FutureBuilder()

getMethod()async{
  String theUrl = 'https://localhost/fetchData.php';
  var res = await http.get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  var responsBody = json.decode(res.body);
  print(responsBody);
  return responsBody;

}

Have you tried this request on you web browser or maybe postman? lets see the result — JideGuru, May 15 '19 at 08:21
Did you find any solution? I have asked the same question here: https://stackoverflow.com/questions/57340929/how-to-make-http-requests-on-flutter-for-web — , Aug 04 '19 at 08:58
I also faced this issue, i changed CORS policy from Back end then it work like charm!! — Hardik Bhalala, Jan 01 '20 at 11:51

Norbert · Accepted Answer · 2021-06-04T12:18:51.847

7

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.

NB: If you're using nodejs install the cors() package and use like

var express = require('express')
var app = express()
var cors = require('cors')

app.use(cors())

Check out the CORS package on npmjs

edited Jun 04 '21 at 12:18

answered Nov 10 '19 at 22:13

Norbert

6,874
14
40
65

1

Thxs, this worked for me. All my flutter side API calls are going thru php scripts to "get" data. Is there any "gotchas" one should be aware of using this solution? – Soccerjf Mar 27 '20 at 01:12
@Soccerjf Read More Here [On Safety of CORS](https://stackoverflow.com/a/12014554/9398610) – Norbert May 27 '20 at 10:25
where should i add this php snippet, i don't have a `.php` file in my flutter web project. should i add it to the `index.html` instead? – eqrakhattak May 29 '21 at 21:36

score 3 · Answer 2 · answered May 15 '19 at 09:20

3

I literally just stumbled over the error myself. You are falling afoul of CORS... if you trace the underlying network traffic, you should see that it sends an OPTIONS request first.

To get it to "work" temporarily, you can launch Chrome with CORS turned off. Obviously, this is not a long term solution, but it should get you going. The command you need is:

open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

answered May 15 '19 at 09:20

Craig Edwards

2,118
1
18
23

Am on windows so ran this but this doesnt seem to work for me still `start Chrome --args --disable-web-security --user-data-dir` – Norbert May 15 '19 at 10:09
Mmm... not sure. I wonder if the same options apply to windows. It definitely fixed the same symptoms for me on the Mac – Craig Edwards May 15 '19 at 10:29
not work for me . Env: Mac 10.14.6 , Chrome 80.0.3987.10 – Bono Lv Feb 15 '20 at 08:34
3

`open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security` worked for me on MAC! – Fintasys Mar 26 '20 at 04:14
I'm searching for a good approach/long term solution. Can you explain or link any helpful references? – Abdullah Khan Jul 16 '20 at 12:22

score 0 · Answer 3 · answered Jan 01 '20 at 11:24

0

What I found out and solved the issue is

For Accessing a website made by flutter basically you are calling a JS script

and for any website to give access to a script (which in my case was another website I was accessing the api from ) you need to give some sort of clearance to access

Which is in this case is CORS - Cross-Origin Resource Sharing

Add below code to your websites .htaccess file

<ifModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www.)?(localhost:55538|somedomain.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Methods: "GET,POST,PUT,DELETE,OPTIONS"
</ifModule>

adding this will now grant access to your flutter website to hit requests to your apis

answered Jan 01 '20 at 11:24

Vicky Salunkhe

9,869
6
42
59

I added .htaccess file above pubspec.yaml file with above content but still getting CORS error while running on localhost – Krunal Darji Jan 01 '20 at 17:42
8

Where is the htaccess file? – Levi Lais Jan 29 '20 at 17:05
it should be present on top of your file structure – Vicky Salunkhe Jan 31 '20 at 08:29
I can't find the .htaccess file. – devDeejay May 29 '20 at 09:45
the file should be present on your server, and if it's not then you should create one and paste the content shown above – Vicky Salunkhe May 29 '20 at 09:50
Hey @VickySalunkhe thanks for the reply, but my web app is hosted in s3, so there is no .htaccess file. Should i still forcefully add one? – devDeejay May 29 '20 at 09:56
Also, I am running into this issue while I am trying to test the app and I am getting the issue, so should I disable CORS on my chrome? and once it is deployed to server with "HTTPS" it wont give me the error? – devDeejay May 29 '20 at 10:07
The answer is useful if you are trying to call some other website of yours from flutter web, so you need to add `.htaccess` file in that domain. or may be you are facing some other issue, which is not related to this question, so do share that too. and if `HTTPS` is working then go with it. – Vicky Salunkhe May 29 '20 at 15:32
where do i find/add `.htaccess` in my localhost? – eqrakhattak May 29 '21 at 22:19

How to make HTTP request to In Flutter Web

3 Answers3

Linked