I'm performing a validation check on a Domain name entered by a user (eg.google.com) in my Nodejs back-end which will return either a good 200 response or bad 404 response if the domain entered was invalid.
In my React front-end I have the following code which sends the POST request:
const response = await
fetch('/new-cert', {
headers: {
'Content-Type': 'application/json'
},
method: 'POST',
body: JSON.stringify({domainInput: domainInputValue})
});
// Show error message if domain is invalid
if (!response.ok) {
this.setState({
validDomain: false
});
} else {
this.setState({
domainAdded: domainInputValue,
domainInputValue: '', // Clear input text
validDomain: true
});
}
However, my app is getting blocked and running really slow when it gets a 404 response, how do I correctly handle this error so that my app continues to run normally after I call setState?
I've tried some try-catch blocks but couldn't get them working.
Related
This is the full react code where I fetch the data to the server:
//process.env.NEXT_PUBLIC_DR_HOST being http://localhost:3000
await fetch(`${process.env.NEXT_PUBLIC_DR_HOST}/validate`, {
method: 'POST',
body: valBody,
headers: { 'Content-Type': 'application/json' }
}).then(res =>
{
if (res.status === 200)
{
body
? fetch(`${process.env.NEXT_PUBLIC_DR_HOST}/view/${_id}`, {
method: 'PUT',
body: body,
})
: fetch(`${process.env.NEXT_PUBLIC_DR_HOST}/view/${_id}/raw`, {
method: 'PUT',
body: valBody,
headers: { 'Content-Type': 'application/json' }
})
}
}).then(res =>
{
// console.log(res)
// window.location = res.url;
})
We are focused on the scenario where body is null (the problem appears in both). So this is the main part:
...
: fetch(`${process.env.NEXT_PUBLIC_DR_HOST}/view/${_id}/raw`, {
method: 'PUT',
body: valBody,
headers: { 'Content-Type': 'application/json' }
})
...
.then(res =>
{
// window.location = res.url;
})
The data is sent to the server, and the page redirected using the response parameter (res.redirect("/")) and the returned promise:
.then(res =>
{ //res.url = http://localhost:3000
window.location = res.url;
})
I get redirected to the specified url and practically everything works fine as it should. But here's the problem: When using the res.redirect() function (as in this case), I also get a 404 error with the message PUT http://localhost:3000/ 404 (Not Found), even if everything worked as expected, the url included in the error message being always the same as the url redirected to.
Useful:
When sending something like res.status without redirecting - nothing happens, but when sending back a message res.send("AAAA") (deos not matter if res.redirect is used) , the problem is invoked again (). So the res.redirect and res.send are causing the error. Sounds strange but the error url when using the res.send function alone is the same applied last time when res.redirect was triggered. (If I redirected res.redirect("/view"), I get and error with the "/view" url, and when replacing the line of code with res.send("anything"), the same error with the same url is printed )
I don't really know what to do
I am making a simple full-stack project wherein I have a very basic REST API built using NodeJS and Express. It is a server-side rendered website.
While trying to login, when I send a POST request to the login endpoint, I am getting the following error in the console
Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/v1/users/login'
from origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
This is the code snippet that sends the POST request
const login = async (email,password) => {
try {
const res = await axios({
method: 'POST',
url: 'http://127.0.0.1:3000/api/v1/users/login',
data: {
email,
password
}
});
if(res.data.status === 'success') {
alert('Logged in successfully');
window.setTimeout(() => {
location.assign('/');
}, 1500);
}
}
catch(err) {
console.log(err);
}
}
Please explain as to why I'm getting that error and how to fix it. The API is not deployed yet and it's running on localhost
Your request origin is:
http://localhost:3000
This is not the same as the domain you're sending the request to:
http://127.0.0.1:3000
To avoid this CORS error, the FQDN must be the same, including hostname and port. (Or you could configure your server for CORS.) As far as the server is concerned, the different host means a completely separate entity, even if it's the same machine.
Change your url to:
url: 'http://localhost:3000/api/v1/users/login',
could you add Access-Control-Allow-Origin header to the request and see ,
const login = async (email,password) => {
try {
const res = await axios({
method: 'POST',
url: 'http://127.0.0.1:3000/api/v1/users/login',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
},
data: {
email,
password
}
});
if(res.data.status === 'success') {
alert('Logged in successfully');
window.setTimeout(() => {
location.assign('/');
}, 1500);
}
}
catch(err) {
console.log(err);
}
}
I am trying to handle various http status codes from my node/express and pass the response back to the angular. i get an error that Cannot set Headers after they are sent to the client. How do i Handle this based on response and also log for various http codes in nodejs?
app.post("/employees", function(req,res) {
var ServerOptions = {
method: 'POST',
uri: 'http://localhost:5001/api/empData',
body: req.body,
json: true,
headers: {
'Content-Type': 'application/json'
}
};
request(ServerOptions).then(function (Response) {
res.status(200).json(response);
})
.catch(function (err) {
res.status(401).json({message: "unauthorized"});
console.log("Unauthorized");
res.status(404 || 500).json({message: "error"});
console.log("Error");
res.set("Connection", "close");
});
});
According to angularjs documentation on $http, when server returns status other than 200, "error" callback is invoked.
Try placing your code for handling 401 status inside .error().
I'm trying to use a sentiment analysis API for some tweets I've streamed. The API in question is this: http://sentiment.vivekn.com/docs/api/. I've done this before in Python before and it worked as expected. I made a post request using the requests library and sent a JSON object with my content. The JSON object looked something like this:
{
"txt": "The content of the tweet."
}
In Python, sending the post request looked something like this:
url = "http://sentiment.vivekn.com/api/text/"
data_dict = {
"txt": "hi"
}
r = requests.post(url,json.loads(json.dumps(data_dict)))
print(r.text)
Now I'll admit I'm new to Javascript and web based programming in general, but I assume the logic should be similar in both languages. I tried using the XMLHttpRequest method but it always returned an internal server error with status code: 500.
The website works, it takes post requests and responds with the analysis, but I can't get it to work with Node. This is what I'm working with in Javascript:
const rp = require('request-promise');
var options = {
method: 'POST',
uri: 'http://sentiment.vivekn.com/api/text/',
body: {
"txt": "This is a very negative sentence, so we should get a negative analysis!"
},
json: true // Automatically stringifies the body to JSON
};
rp(options)
.then(function (parsedBody) {
console.log("Request received");
console.log(parsedBody);
})
.catch(function (err) {
console.log("Something went wrong\n" + err);
});
It always catches an error with status code 500. I've tried several other methods including making the request with XMLHttpRequest. Nothing seems to work. It would be great if someone could point out where I'm going wrong.
This isn't an answer, but I thought it useful to show some code that evokes a different response, which may be a clue that will help debug the problem.
I get the same response with curl:
jim-macbookpro:~/development/node/so$ curl -X POST 'http://sentiment.vivekn.com/api/text/' -H "Content-Type: application/json" -d '{"txt": "hi"}'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>500 Internal Server Error</title>
<h1>Internal Server Error</h1>
<p>The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in theapplication.</p>
I changed the example to use 'node-fetch', and I don't get 500, rather I get 405 - METHOD NOT ALLOWED.
My suspicion is that this is a problem with the server being somehow very particular about the format of the request.
I hope this helps.
const fetch = require('node-fetch');
fetch('http://sentiment.vivekn.com/api/text', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
txt:
'This is a very negative sentence, so we should get a negative analysis!'
})
})
.then(function(parsedBody) {
console.log('Request received');
console.log(parsedBody);
})
.catch(function(err) {
console.log('Something went wrong\n' + err);
});
I am having a axios request in my react application, for which I am following the axios npm docs.
This is my axios request
axios.post(helper.getLoginApi(), data)
.then((response) => {
console.log(response);
this.props.history.push(from.pathname)
})
.catch((error)=> {
console.log(error);
})
I am able to successfully log the data on a successful request. However When I intentionally produce an error and try to console.log it, I don't get the result logged instead, I just see
POST http://localhost:3000/login 401 (Unauthorized)
:3000/login:1
Error: Request failed with status code 401
login.js:66
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)
However when I go to Network Tab in Chrome Console, I can see the below response returned.
Thanks for help in advance .
From the Github Docs. The response of an axios request looks like
{
// `data` is the response that was provided by the server
data: {},
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the headers that the server responded with
// All header names are lower cased
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {},
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
So essentially catch(error => ) is actually just catch(response => )
and so you can log error.response.data and you should be able to see your response message.
When you log console.log(error), what you see is the string
returned by the toString method on the error object.
According to the error handling section on the same docs, you can have the catch the error response like
axios.post(helper.getLoginApi(), data)
.then((response) => {
console.log(response);
this.props.history.push(from.pathname)
})
.catch((error)=> {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
})