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??
Related
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.
I have an account on Napster developers. And, I made an app, and I got an api key. According to Napster documents Here is what I send as a GET request over UPC.
function getByUpc() {
console.log("getByUpc is called ...");
return $http({
method: 'GET',
url: 'http://api.napster.com/v2.2/albums/upc/602498619070',
headers: {
'Authorization': 'BASIC my-apikey'
}
}).then(handleSuccess, handleError('Error getting user by id'))
}
I changed BASIC to Bearer, but I also get a same result (401 error).
Also, I tried to put apikey as a query string but I get 403 error.
Any suggestion?
http://api.napster.com/v2.2/albums/upc/602498619070?apikey=MY-APIKEY
I'm quite new with ANGULAR and web development in general and I'm currently working on a web tool. Now I want this tool to send a POST request to a web service but Im encountering a weird bug. Now I have below code in my javascript:
var data_info = { test_id: 'TEST', model_id: 'TEST:TEST_ID' };
//data_info = JSON.stringify(data_info);
var request_json = {
method: 'POST',
url: url,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
data: data_info,
cache: false,
};
console.log(request_json);
$http(request_json).then(function successCallback(response) {
// response code here
}
Now this code currently doesn't pass the preflight request check and is always returning a 405. But if I change the line data: data_info in the request JSON into a new key let's say body: data_info it now successfully sends the request and I can confirm that the service is receiving it. I'm not sure what's the issue here and can't figure it out.
change your header to :
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
Please try
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);
})
}
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.