I was attempting to make a post request with FormData to my local server using axios inside React. Here is the method that was posting to the server:
uploadHandler = () => {
const formData = new FormData();
formData.append(
"myFile",
this.state.selectedFile,
this.state.selectedFile.name
);
axios({
method: "post",
url: "/",
data: formData
}).then(response => {
});
};
For the last three hours, I kept getting this error in my chrome console:
net::ERR_CONNECTION_ABORTED when firing the method. I could not figure out what was wrong and tried adding various headers to the request, but nothing worked.
Then, all of a sudden, it just WORKED. I had no idea why and hit ctrl z until I could pinpoint the exact change that got it to work. The hunt turned up nothing and now I can't get the error no matter how hard I try. This is driving me crazy not knowing what the issue was that took 3 hours of my day!
Has anyone experienced something similar? Am I missing something here? Any input is greatly appreciated!
Related
I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:
axios.interceptors.response.use(
(response) => {
console.log(response);
return response;
},
(error) => {
handleApiFail(error.response);
});
If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.
EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
I have code like this:
axios.interceptors.response.use(null, (error) => {
.........
return Promise.reject();
});
Then, I found I miss to return my "error" in promise reject, correct like this:
return Promise.reject(error);
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
Can anyone see why, this would crash my app server?
// note_routes.js
module.exports = function(app, db) {
app.post('/notes', (req, res) =>
{
console.log(req.body)
res.send('Hello')
});
};
I am following the tutorial on how to build a simple node server api on medium, https://medium.freecodecamp.org/building-a-simple-node-js-api-in-under-30-minutes-a07ea9e390d2
Yet, I cant figure out how to get past this error?
Any tips would be appreciated.
To close off this question, I'll summarize in an answer.
app needs to be passed as a function reference, not as a string.
Change this:
require('./app/routes')('app',{})
to this:
require('./app/routes')(app,{})
I am trying to connect to my socket using socket.io-client
I'm able to make a get request using
this.socket.emit('get', {url: '/socket'}, (res) => console.log(res.body) );
But When i'm making a post request i don't know how to pass data into the request
this.socket.emit('post', {url: '/socket'},{message:"Hola"}, (res) => console.log(res.body) );
Try this.socket.post('<yourBaseURL>' + '/socket',{message: "Hola"});
This is a method that worked for me, see if it does for you too. Make sure that you have the complete POST Url and not just the relative path like you provided in your example.
So I finally got it working after messing around with it for a while. The solution was that in the options the key needed a data field to tell it to put it in the body of the Request.
socket.emit('post', {url: '/socket', data:{message:"Sending Successfully"}}, (res) => console.log(res.body) );
In the server now you can simply get the req and open req.body.message and the message will be right there
I've been trying to learn Ember and I have a question.
In my store I'am getting data from .json like below. I have tried without buildUrl function but cant load the json file, then found this solution on SO.
CocktailApp.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
bulkCommit: false,
url: "http://localhost:8888",
buildURL: function(record, suffix) {
var s = this._super(record, suffix);
return s + ".json";
}
})
});
Now comes my question: When I commit the chances (by pressing add to favs or remove from favs) RESTAdapter adds ".json" at the end of to PUT request. See the below code and screenshot
CocktailApp.CocktailController = Ember.ObjectController.extend({
addToFav: function () {
this.set('fav',true);
this.get('store').commit();
},
removeFromFav: function () {
this.set('fav',false);
this.get('store').commit();
}
});
I think thats why my PUT request can not be handled. But If I remove the builtURL function no json loaded at all. How can I resolve this problem?
Thanks
If the API endpoint url does not require .json at the end of it, then remove that line from your buildURL function. My guess is that the example code you got was consuming a ruby on rails api, or something similar.
remember, when you send a GET, PUT, POST, or DELETE to a url, that url needs to actually be a real endpoint. You can't just add extraneous stuff to it and have it still work.
Please help,
I have been trying to get Json data but with no avail.
I have managed to get it working in dreamweaver but once uploaded to my domain it then does not work.
I have looked at many examples but cant get mine to work. I have seen examples that get picturs from flikr that work on my domain.
I need to get the json data from http://api.open-notify.org/iss-now/
This works in dreamwaever
$.getJSON('http://api.open-notify.org/iss-now/',
function(json) {
$('#images1').text(json.timestamp);
});
and this
$.ajax({
type: 'GET',
url: MyUrl,
dataType: "json",
success: function(data){alert("Success");hello(data);},
error: function(XMLHttpRequest, textStatus, errorThrown){alert("Error : "+" ':' "+textStatus+" ':' "+errorThrown);},
});}
is this a cross domain issue? why does the Flikr ones work as this is cross domain too? please help.
Many Thanks.
cross domain should be done using JSONP, checkout this question, and the JSONP section here.