php - IN Flutter Web getting 'XMLHttpRequest' error while making HTTP call
Get the solution ↓↓↓
I am using XAMPP control panel and using a local server like Apache port no 80, but in flutter web getting XMLHttpRequest error and in mobile device. The same coding fetches data using API not getting any error. How to fetch data using API while app run on flutter-web?
Error
Launching lib\main.dart on Chrome in debug mode...
Syncing files to device Chrome...
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Error: XMLHttpRequest error.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28 get current
packages/http/src/browser_client.dart 84:22 <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1450:54 runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 143:18 handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 696:44 handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 725:32 _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 519:7 [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1302:7 <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14 _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39 dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37312:58 <fn>
at Object.createErrorWithStack (http://localhost:5555/dart_sdk.js:4361:12)
at Object._rethrow (http://localhost:5555/dart_sdk.js:38189:16)
at async._AsyncCallbackEntry.new.callback (http://localhost:5555/dart_sdk.js:38183:13)
at Object._microtaskLoop (http://localhost:5555/dart_sdk.js:38015:13)
at _startMicrotaskLoop (http://localhost:5555/dart_sdk.js:38021:13)
at http://localhost:5555/dart_sdk.js:33518:9
Backend Side PHP Webservice
<?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");
include 'config.php';
$sql="select * from calinsert";
$result=mysqli_query($conn,$sql)or die("query failed");
if(mysqli_num_rows($result) >0){
$output=mysqli_fetch_all($result,MYSQLI_ASSOC);
echo json_encode($output);
}
else{
echo json_encode(array('message'=>'no record found','status'=>false));
}
?>
Flutter Side Code
Future getdata()async {
final response = await http.get(
'http://localhost:80/web_service/calview.php',
headers: {
"Accept": "application/json",
"Access-Control_Allow_Origin": "*"
});
print(response.statusCode);
print(response.body);
}
Answer
Solution:
In most cases of Flutter API use, addAccess-Control-Allow-Origin value in header might resolve the issue. (Note: This will help in access the local or external APIs)
header("Access-Control-Allow-Origin: *");
Hint: you have typo in your above header, please check and correct.
Answer
Solution:
Fix the typo (replace underscores by dashes):
header("Access-Control-Allow-Origin: *");Add the following header in your php code:
header("Access-Control-Allow-Headers": "Access-Control-Allow-Origin, Accept");
Answer
Solution:
Just removed the header attribute from the post method and it works for me.
Answer
Solution:
I was recently getting this error as well and I seem to have fixed by upgrading my package to the most recent0.12.2 version and it seems to have helped - so far.
Answer
Solution:
Thank you! F12 Tools -> Access to XMLHttpRequest at 'https://localhost:44360/xxyy' from origin 'http://localhost:52273' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
More info - CORS is usually a sever side issue, you have to set up what clients are allowed. For development purposes, my flutter web is talking to a .net core service so I had to enable CORS in development mode only to allow CORS using the following:
builder
.AllowAnyOrigin()
.WithHeaders(HeaderNames.AccessControlAllowHeaders, "Content-Type")
.AllowAnyMethod();
}));
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: unable to determine current zabbix database version: the table "dbversion" was not found.
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.