Axios post request in react-native app - http

I'm using axios in my react-native app, but I can't make any POST request in android simulator/device. It always return 400 Bad Request from the server.
I've tried to set Content-Type: application/json on headers but it didn't work as well.
on postman the request works as expected.
here's the request config object:

As you know, 400 Bad Request error means that the request you sent to the website server was somehow incorrect or corrupted and the server couldn't understand it.
I think there maybe problems on your request like as wrong URL or params or header format...
PS. Axios post methods syntax is as follows:
axios.post(url[, data[, config]])
You can test any axios method here and put it into your code base after it works.

Related

400 Bad request while consuming a rest service with POST method?

I'm getting http requestor connection problem with POST:request a bad request even though I'm configuring properly. I'm sending json payload in the body and Bearer token in headers parameters with content type, I can evaluate the token and payload properly but still getting as a bad request when I tried to hit the direct URL as well, and I tried the trigger in postman with the same token generated in mule where I'm getting the success response but while using the same service within mule getting as bad request, I'm using http connector plugin version 1.7.1 in pom.xml.. Is there any problem with the dependency? can anyone help me with this?
If you are successful doing the request in postman then the HTTP request in your Mule application has to need some adjustments to make it match the postman request. Compare them carefully to make them match.

Random timeout on GET request with Axios

I have multiple sites buildt with static sites generator (gridsome, vue based).On build, they consume WP REST API data through Axios.
Lately, my build would fail a lot because Axios requests get randomly timedout.
On the WP side, each request made by axios is returning a 200 response, the body of the response is well formed. Nothing odd.
But Axios will randomly receive nothing...
I don't know where to search since the requests are returning 200, what could go wrong between the response (being 200) and Axios ?
Additional clues :
I never have these timeout using postman, or my browser
The endpoints in WP REST API that timeouts are random
I use REST API LOG to monitor the states of the requests on WP side
No matter the timeout configured on axios, it just never get the response
Any help will be appreciated !
Thanks for your time
This was an issue with Axios indeed.
Axios in his 0.19 version returned timeouts where they might be other errors involved.
I updated it to v0.22, that show me another error : some JSON response were truncated and not able to be parsed.
Related issues on github :
https://github.com/axios/axios/issues/2590
https://github.com/axios/axios/issues/1545
I had to switch from axios to node-fetch.

Authorization header not working Angular 5

I am consuming an JWT based API.
I am passing the Authorization header correctly (I mean in the code),
using headers.set('Authorization', 'token') and i am using the correct method which is GET.
When i serve the application (using ionic 3), i have the error 405 (Method Not Allowed), but the same request works when i use POSTMAN or i paste the code snippet (generated from POSTMAN) into the console.
Here's two captures of the working request (using code snippet from POSTMAN into the console) and the not working request (from the ionic app).
By the way, there is something weird about the authorization, i highlighted it in red.
If it is not a cors issue, you could try according to following code
const httpOptions = {
headers: new HttpHeaders()
.set('Authorization', 'Bearer ' +this.auth_token)
}
return this.http.get('http://xxxxxx00x:8080/api/clients',httpOptions);
On the top screen you have got request method OPTIONS not GET and response from the server is 405 Method not allowed not 401 Unauthorized or 403 Forbidden.
So the problem is not authorization but request method.
Looks like CORS issue.

Vue-Request not sending Authorization Header

I'm using VueJS with vue-request for http requests. I'm trying to subscribe an user to a Mailchimp list but Mailchimp uses BasicAuth, so I'm doing as such:
scope.$http.post('https://us15.api.mailchimp.com/3.0/lists/listid/members',
{...mydata...}, {headers: {Authorization: 'Basic myencodedAPIkey'}})
But I get an error from the API: 401 Unauthorized - Your request did not include an API key.
So I check the Network log on Chrome and the Authorization is on my headers like this: **Access-Control-Request-Headers: authorization** but it should be like **Authorization: myencodedAPIkey**
On the Console the error appears as:
XMLHttpRequest cannot load
https://us15.api.mailchimp.com/3.0/lists/listid/members. Response
to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://127.0.0.1:8000' is therefore not allowed
access. The response had HTTP status code 401.
When I use Postman it works just fine as the header is correctly sent.
This problem seems to have been solved here with setting the header on every request
https://laracasts.com/discuss/channels/vue/how-to-solve-the-allow-control-allow-cross-in-the-vuejs-header-request-setting?page=2
and here through setting it once
Vue-Request not sending Authorization Header
You are getting CORS error, when you are trying to request from one host to another, and the 'another' part does not allow it to happen. To prevent this error you can use webpack proxy configuration, so this way you do not have cross origin request, but I don't know how you will deal with this in production environment if your api does not allow cross origin requests.
In a project I'm working on, our devServer configuration is as follow
proxy: {
'/api': {
target: 'http://localhost:8080/'
}
},
with this, any request happening on /api/any/url will be redirect to localhost:8080/api/any/url

Angular 2 Http Get call with Basic Authentication

There are various questions related to the same concept, but somehow I am not able to figure out a simple HTTP Get call with Angular 2.
I have tried the same service with postman and it works, but not with a angular service.
My code looks like:
Service.js
let headers = new Headers({ 'Authorization': 'Basic ' + btoa('a#b.com:password') });
let options = new RequestOptions({ headers: headers });
return this.http.get(Config.Api.GetNavbar, options).map((res: Response) => res.json());
I get a 401 Unauthorized error even if I am setting the headers.
Any help?
I was facing exactly the same behavior when I was doing my first REST calls with Angular - it worked with Postman but didn't with Angular.
Some Browsers make a so called "preflight" call before the "real" AJAX call, and this first call caused the 401 Unauthorized response. The issue was that I was not allowing OPTIONS headers without authentication. The handling of OPTIONS headers was also in the restricted area but the authentication information was missing so the server send me back a 401 Unauthorized.
In the end the solution was to handle the OPTIONS requests outside of the restricted area. So the client receives now an OK for OPTIONS headers requests and goes on with the "real" call.
Since I have adjusted the request handling on server side everything works as expected.

Resources