Flutter web HTTP exception Error: XMLHttpRequest error - flutter

While calling an API (not mine, a 3rd party server), using the HTTP package, I get the following error:
Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28 get current
I get this only when running locally on web, not with the iOS emulator (works just fine there).
This didn't help me
Here's the code:
try {
response = await _httpClient.get(
Uri(
scheme: 'http',
host: host,
path: path,
),
headers: {
"Access-Control-Allow-Origin": "*",
},
);
}

well, changed scheme: 'http' to scheme: 'https' and it works...
Don't know why it works on mobile and not on web

Related

Request http in flutter web

I want to post data to the server with dio library but when I send data, I get XMLHttpRequest error. The server programmer checked twice his codes and made sure to enable CORS in the server. I think this error occurs because the server is not HTTPS and the browser blocks the request. I use this code to send my data to the server:
Response response = await client
.post(theUrl,
options: Options(
validateStatus: (status) {
return status! < 500;
},
followRedirects: false,
headers: {
HttpHeaders.contentTypeHeader: "application/json",
HttpHeaders.acceptHeader: "*/*",
HttpHeaders.accessControlAllowOriginHeader:
"Access-Control-Allow-Origin, Accept",
}),
data: convert.json.encode(data))
.timeout(const Duration(seconds: 10));
My log is just:
DioError [DioErrorType.RESPONSE]: XMLHttpRequest error.
So, How can I ignore the certificate of the server host and send data to an HTTP URL in flutter web?
I'm almost sure that the problem is because your server doesn't have an https certificate.
A workaround is run / debug your application with flutter desktop.
You can also take a look at: How to solve flutter web api cors error only with dart code?

Http request working on ionic serve but doesn't work on "ionic cordova run android --device"

I am using Ionic native http to make server requests. The server is hosted on aws and the apis are up and running (verified by postman).
When i do ionic serve the requests go through and work but when i try to run it on device it doesnt work. On inspection i get "net::ERR_CLEARTEXT_NOT_PERMITTED" and post is sent as OPTIONS
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://18.220.143.133/api/login", ok: false, …}
already tried adding to config.xml
login(user: User): Observable<AuthResponse> {
return this.httpClient.post('http://18.220.143.133/api/login', user, {
headers: new HttpHeaders().set('Content-Type', 'application/json'),
}).pipe(
tap(async (res: AuthResponse) => {
if (res.success == true) {
await this.storage.set('user',res.user);
await this.storage.set('ACCESS_TOKEN', res.token);
this.authSubject.next(true);
}
})
);
}
I expect http requests to go through from mobile devices as well.
The same happened to me, until in the config.xml file I added:
<preference name = "android-targetSdkVersion" value = "27" />
It has to do with your CORS for the API call. This may help. Also, since you're using Angular HTTP requests, check here HTTP request from angular will send with method OPTIONS instead of POST.

Ionic issue with HttpClient.post (No 'Access-Control-Allow-Origin' header is present)

Well, I've tried to send a post request from HttpClient class in Ionic3, in the next code fragment I show the function in TypeScript.
constructor(public http: HttpClient, ...){ ... }
loginAndGetUserData(email0, password0): any
{
return this.http.post
(
'http://xxx.a_api/api/login.json',
{
email: email0,
password: password0
},
{
headers:
{
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'POST, GET, OPTIONS, PUT',
'Content-Type':'application/json',
'Accept':'application/json'
}
}
);
}
Then, when I call this method I receive an error with undefined code as response.
ErrorCode: undefined
Http failure response for (unknown url): 0 Unknown Error
Capture image of device
In Android logs, after the function call, I get this message:
08-09 21:16:31.649 19292-19292/io.ionic.starter D/SystemWebChromeClient: http://localhost:8080/: Line 0 : XMLHttpRequest cannot load http://xxx.a_api/api/login.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.
08-09 21:16:31.649 19292-19292/io.ionic.starter I/chromium: [INFO:CONSOLE(0)] "XMLHttpRequest cannot load http://xxx.a_api/api/login.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.", source: http://localhost:8080/ (0)
And in my PHP code I tried to put 'Access-Control-Allow-Origin:*' in header, but It receive empty data from the client. In some Ionic forum some people say that I have to modify ionic.config.json file putting proxies attribute with path and proxyUrl, but neither It resolve my issue.proxies attribute, in ionic.config.json file, looks like:
"proxies":
[
{
"path": "/api",
"proxyUrl": "http://xxx.a_api/api"
}
]
Well, I don't know what to do, I'm sure that It's a client problem, 'cause the server receive empty data.
Thanks in advance.
This is CORS issue. You will need to handle it on server side. For testing purpose, you can use Allow-Control-Allow-Origin: * plugin from chrome web store. By enabling this plugin your issue will be resolved.

Error: connect EINVAL 0.0.xx.xx:80 - Local (0.0.0.0:0)

I'm trying to use hubot msg object to send http request, but finally get this error:
Error: connect EINVAL 0.0.xx.xx:80 - Local (0.0.0.0:0)
A similar question is saying this is caused by hosts file, but no detail.
I've been seeing this problem multiple times during the last two years. In all cases it was what #Shiva said: either the protocol or the port was missing.
Here is the most recent occurrence of this problem a co-worker had with the axios module in a Node.js application:
axios({ method: "get", url: "hostname:8080/liveness" })
After prepending http it worked:
axios({ method: "get", url: "http://hostname:8080/liveness" })

LDAP authentication fails on ripple and actual device but not on browser

I'm trying to get an authorization token for an Ionic App from a LDAP service in a remote server.
I can get the auth token when I run the Ionic App in the browser with the command ionic serve and when I use Postman,
BUT it takes lot of time and eventually fails when I debug using ripple for the App or when I test on the phone or tablet.
The error says:
status: 503
statusText: Service Unavailable
data: html code from http://s3.amazonaws.com/heroku_pages/error.html
var deferred = $q.defer();
var req = {
method: 'GET',
url: 'http://host:port/adap?bind=token',
headers: {
Authorization: 'Basic <username>:<password>'
}
};
$http( req )
.then(function(data, status, headers, config) {
console.log(data);
deferred.resolve(data.data);
})
.catch(function(data) {
console.error(data.data);
deferred.reject(err);
});
return deferred.promise;
Does anybody have some hint about this issue?
Thanks in advance
For what you say the service is available, so the problem must be in the app side.
Check IP tables, and check ripple's proxy and set it to none.