I want to connect to a web service. When I use postman, request send and response receive successfully. But in the flutter app, I get error 422 in the android emulator. And with the same code in flutter web, I get XMLHttpRequest error.
My postman:
This is my data that send to the server:
var data = {
"username": usernameController.text,
"password": passwordController.text,
"email": emailController.text
};
And send a request with dio:
Response response = await client
.post(theUrl,
options: Options(headers: {
HttpHeaders.contentTypeHeader: "application/json",
HttpHeaders.acceptHeader:"*/*"
}),
data: jsonEncode(data))
.timeout(const Duration(seconds: 10));
I get errors on this method:
on DioError catch (error) {
var statusCode = error.response?.statusCode;
print("+++++++++++++++" + statusCode.toString());
print("+++++++++++++++" + error.message);
}
How can I fix these errors?
I Added this code to options in dio and Error 422 in mobile is fixed:
Options(
validateStatus: (status) {
return status! < 500;
},
followRedirects: false,
...)
But I still get error XMLHttpRequest in flutter web.
Related
I have a button which when clicked, prints out response.
This is how the response is
{
"status": "success",
"user": "Worked well"
}
when I test it with postman it works fine, but when I try it from my flutter project, I get this error
I/flutter ( 5147): Response: - Instance of 'Response'
I/flutter ( 5147): FormatException: Unexpected character (at character 1)
I/flutter ( 5147): <!DOCTYPE html>
I/flutter ( 5147): ^
This is my flutter code:
http.Response response = await http.post(
Uri.parse(url + 'testMe.php'),
headers: headers,
body: body,
);
print('response ${response}');
if (response.body.isNotEmpty) {
json.decode(json.encode(response.body));
} else {
print('Response is empty...');
}
One thing I noticed is that, sometimes it does not throw the error above in flutter, it works fine and sometimes it throws the error, so I don't why it happen that way.
Flu
Postman Header
This worked for me:
Map<String, String> headers = {
'Content-Type': 'application/json',
'Charset': 'utf-8',
};
Your api return you a html instead of json, you can do this to avoid getting FormatException:
http.Response response = await http.post(
Uri.parse(url + 'testMe.php'),
headers: headers,
body: body,
);
print('response ${response}');
if (response.statusCode == 200) {
json.decode(response.body);
} else {
print('Response is empty...');
}
usually when statuscode is 500 or 404 this happened, when you check for status code 200, you can avoid getting this FormatException.
Also you don't need to encode the response and decode it again, your response is already encoded in server side, just decode it.
I'm trying to fetch an image resource that's part of a conversation message.
I've tried both FETCH as well as using AXIOS but I'm getting the same error message.
Here's an example of my FETCH request
const token = `${accountSid}:${authToken}`;
const encodedToken = Buffer.from(token).toString('base64');
let response = await fetch('https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>',
{
method:'GET',
headers: {
'Authorization': `Basic ${encodedToken}`,
}
});
let data = await response.json();
console.log(data);
And here's what Axios looked like
let config = {
method: 'get',
crossdomain: true,
url: 'https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>',
headers: {
'Authorization': `Basic ${encodedToken}`,
},
};
try {
const media = await axios(config);
console.dir(media);
} catch(err) {
console.error(err);
}
Both ways are NOT working.
After looking into it more, I found out that Chrome makes a pre-flight request and as part of that requests the allowed headers from the server.
The response that came back was this
as you can see, in the "Response Headers" I don't see the Access-Control-Allow-Headers which should have been set to Authorization
What am I missing here?
I have made sure that my id/password as well as the URL i'm using are fine. In fact, I've ran this request through POSTMAN on my local machine and that returned the results just fine. The issue is ONLY happening when I do it in my code and run it in the browser.
I figured it out.
I don't have to make an http call to get the URL. It can be retrieved by simply
media.getContentTemporaryUrl();
I developed a flutter web application that contains a lot of APIs in the post and get.i got response correctly .But when I tried to call a PUT API I got CROS.error.
In backend side they added
"Access-Control-Allow-Origin": "*"
I took build using flutter build web --web-renderer html --release .But nothing works.
Future<void> uploadfile(String url, image, String type, data) async {
var urls = Uri.parse(url);
try {
try {
final body = {'username': 'usern', 'password': 'pass123'};
var response = await https.put(
urls,
body:
//data,
jsonEncode(body),
//data,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin":
"*", // Required for CORS support to work// Required for cookies, authorization headers with HTTPS
"Access-Control-Allow-Headers":
"Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
"Access-Control-Allow-Methods":
"POST, GET, OPTIONS, PUT, DELETE, HEAD"
},
);
} catch (e) {
print("catch error is $e");
}
} catch (e) {
throw ('Error uploading photo');
}
}
I'm currently working on a project which like a lot of other projects works with s3 storage. In this case the storage is linked via the back-end.
The situation is like this, I can get the 'attachment' via an URL, lets say example.com/api/attachments/{uuid}. If the user is authorized (via the header Authorization) it should return a 302 statuscode and redirect to the s3 url. The problem is that after the redirect the Authorization header persists and the http client return a 400 response and it's because of the persisting Authorization header. Is there any way I can remove the Authorization header after redirect without catching the first request and firing a new one?
My http client code currently looks like this:
#override
Future get({
String url,
Map<String, dynamic> data,
Map<String, String> parameters,
}) async {
await _refreshClient();
try {
final response = await dio.get(
url,
data: json.encode(data),
queryParameters: parameters,
);
return response.data;
} on DioError catch (e) {
throw ServerException(
statusCode: e.response.statusCode,
message: e.response.statusMessage,
);
}
}
Future<void> _refreshClient() async {
final token = await auth.token;
dio.options.baseUrl = config.baseUrl;
dio.options.headers.addAll({
'Authorization': 'Bearer $token',
'Accept': 'application/json',
});
dio.options.contentType = 'application/json';
}
Good news! This has been fixed recently with Dart 2.16 / Flutter v2.10!
Related bugs in dart issue tracker:
https://github.com/dart-lang/sdk/issues/47246
https://github.com/dart-lang/sdk/issues/45410
Official announcement:
https://medium.com/dartlang/dart-2-16-improved-tooling-and-platform-handling-dd87abd6bad1
TLDR: upgrade to Flutter v2.10!
Looking at the Dio docs, it seems like this is intentional behaviour.
All headers added to the request will be added to the redirection request(s). However, any body send with the request will not be part of the redirection request(s).
https://api.flutter.dev/flutter/dart-io/HttpClientRequest/followRedirects.html
However, I understand (and agree!) that this is generally undesirable behaviour. My solution is to manually follow the redirects myself, which is not very nice but works in a pinch.
Response<String> response;
try {
response = await dio.get(
url,
options: Options(
// Your headers here, which might be your auth headers
headers: ...,
// This is the key - avoid following redirects automatically and handle it ourselves
followRedirects: false,
),
);
} on DioError catch (e) {
final initialResponse = e.response;
// You can modify this to understand other kinds of redirects like 301 or 307
if (initialResponse != null && initialResponse.statusCode == 302) {
response = await dio.get(
initialResponse.headers.value("location")!, // We must get a location header if we got a redirect
),
);
} else {
// Rethrow here in all other cases
throw e;
}
}
Im trying to make a http-request to Filemaker with Flutter(package:http/http.dart)
I can get the token normally, but if i try the make an _find request to Filemaker it always get's rejected(400 Bad Request) without any message.
In Postman I can do the exact same request without issue!
var body = { "query":[{
"loginName": "==testUser#test.com"
}]};
Response response = await post(url,
headers: {
HttpHeaders.authorizationHeader: 'Bearer $token',
HttpHeaders.contentTypeHeader: 'application/json'},
body: json.encode(body));
Found it:
Dart http adds: content-type: application/json; charset=utf-8
And Filemaker rejects this..
But now is the question why does Filemaker API rejects such an API Call?
SOLVED.
I was able to access one user in a FileMaker layout using Dio.
Dio dio = Dio();
dio.options.headers['content-Type'] = 'application/json';
dio.options.headers["authorization"] = "Bearer ${token}";
Response recordResponse;
recordResponse = await dio.post(
findUrl,
options: Options(followRedirects: false, validateStatus: (status)
{return status < 500;}),
data: { "query":
[{
"username": "=Jake",
"password": "=password"
}]
}
);