Ionic app is not connecting with form-data http request - angularjs

Trying to connect Ionic app to server.
I am not getting proper response from server for $http request, I am using PHP back-end,
The same API is working in POSTMAN, after changing the content type to form-data
Below is the code,
var req={
url: 'url',
method: "POST",
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'text/plain'
},
data: {
username: "syam",
password:"syamnath123"
}
}
Response from server
{"data":{"status":"Failed","meta-info":[]},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"url","headers":{"Content-Type":"multipart/form-data","Accept":"text/plain"},"data":{"username":"syam","password":"syamnath123"}},"statusText":"OK"}
The Username and password is correct, Tested POSTMAN(Started giving expected response when i changed content type to form-data, before it was giving status failed)
I thought of cross domain,then I have build release and tested from my phone, I am getting the same error.
I cannot check the server side code as the php code is handling by some one in different company
Please help.

Related

API cs-cart put request by react and axios

I use react in front-end and cs-cart API in back-end.
In the following code I used axios.put() as follows:
const data = JSON.stringify({
"test1": "val1"
});
const config = {
method: 'put',
url: 'https://example.com/api/product/111',
headers: {
'Authorization': `Basic ${token}`,
'Content-Type': 'application/json'
},
data : data
};
axios(config)
.then(res => {
console.log(res)
});
When sending a request, the browser sends a request with the OPTIONS method, which error: 405
Method Not Allowed returns.
And the original request (PUT) is not sent.
cs-cart is installed on the server. And the react project on localhost
Have you made sure to understand the error correctly i.e
The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response
status code indicates that the server knows the request method, but
the target resource doesnt support this method.
The server must generate an Allow header field in a 405 status code
response. The field must contain a list of methods that the target
resource currently supports.
Make sure that the server is able to understand how to interpret your request so the clients are able to proceed.
You can look at this in more detail below here.

Is Excel clearing our http request authorization header attribute?

We are trying to get our Office Excel add-in to contact one of our own Web API services so it can send and receive data from it. For the request to be authorised we must fill out the Authorization header attribute. This is how we are doing the request, which works perfectly well in all of our normal web applications.
this.LoginAuth = function (authString) {
$http.defaults.headers.common.Authorization = 'Basic ' + authString;
return $http({
url: MainFactory.GetWebAPILocation() + '/API/User/AddInLoginAuth',
dataType: 'json',
method: 'POST',
data: {},
headers: {
"Content-Type": "application/json"
}
});
}
However, when the request is made through the add-in the Authorization attribute has been cleared down causing our request to fail. Is this clearing of the attribute being done by Excel? And if so, is there a way in which we can stop it?
Turns out this was a CORS issue in our Web API service.

ReactJS seems to turn POST requests into GET requests

I'm using React and the fetch API to do a POST request to a user authentication backend. I can do this POST request below with Postman, and I get the correct JWT back, but oddly - whenever I use the following code in React, the POST request somehow hits the server as a GET request.
Code in React:
return this.fetch('http://fakeURL.com/auth', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"email": "email#email.com",
"password": "password",
})
}).then(res => {
this.setToken(res.token);
return Promise.resolve(res);
})
The logs show (first the pre-flight request):
Request URL: http://fakeURL.com/auth
Request Method: OPTIONS
Status Code: 200 OK
Referrer Policy: no-referrer-when-downgrade
And the actual request:
Request URL: http://fakeURL.com/auth
Request Method: GET
Status Code: 405 METHOD NOT ALLOWED
Referrer Policy: no-referrer-when-downgrade
Things I've tried:
Running the app both locally and in an AWS S3 bucket (with CORS configured to allow all methods, and from any origin)
Using Flask on our backend to enable CORS
Hitting our backend via Postman with the same API POST request (when we use Postman, the API request works as intended, as a POST that returns a token)
Hitting other URLs (e.g. http://httpbin.org/post) to see if my code can hit those endpoints with a POST rather than a GET... and those endpoints see GET requests as well (instead of the intended POST)
This is so confusing - what could possibly cause our POST request to go out as a GET request? I feel like we've eliminated every possibly cause outside of something weird happening in React. Thanks for the help!
npm install --save axios
on your auth page:
import axios from 'axios'
Modify your post so instead of using fetch:
login(emailValue, passwordValue) {
return axios({
url: `yourAuthURL`,
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
data: {
"email": emailValue,
"password": passwordValue,
}
}).then(res => {
console.log(res);
})
}

Body is giving undefined when attempting to send fetch() request from React

I am attempting to send a POST request via fetch() to a backend service that I've written from React. My code for the request is:
var options = {
method: 'post',
body: '{"foo":"bar"}',
mode: 'no-cors',
headers: { 'content-type': 'application/json' }
}
var request = new Request('/autocomplete', options)
However, when I try to send the request, I get a 500 error from my backend service. Turns out that the body is giving undefined. When I console.log(request.url, request.method, request.body, request.mode) I get:
http://localhost:3000/autocomplete POST undefined no-cors
I'm really confused because this was working before. I restart my server, and all of the sudden it's broken. What am I doing wrong??

IE Edge Angular JS $http post CORS request JSON not working

I am working on Angular JS app which connects to CORS .NET WEB API. The below code works fine with chrome / firefox / safari browsers but for some reason not on IE Edge (any version). I get OPTIONS pre-flight response with HTTP code 200 but subsequent post request does NOT fire.
var postData = {
'id': 1,
'name':'Niket'
}
function SendData(APIServiceUrl, postData)
{
return $http({
method: 'POST',
url: URL + APIServiceUrl,
data: postData,
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
});
}
If I switch the content-type to
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
then I do get the post request working. But our API Server response only allows
Access-Control-Allow-Headers: Authorization, Content-Type
I have gone through dozens sites to solve this issue, and have tried bunch of solutions ranging from JSON.stringify(), verifying caching is disabled, syntax checking, CORS setup etc. but not able to find solution to why the POST request does NOT fire in IE Edge.
An article that I have found along similar line is this but that has not been SOLVED either --> Post JSON ajax request with cors not working in IE10/Edge.
Angular JS ver 1.5.7, IE Edge version 40.15063.0.0,
PLEASE HELP!!!

Resources