I'm following a tutorial verbatim.
The following code throws up a 400 Bad Request error, with the following information:
data: undefined status: undefined statusText: undefined headers:
undefined config: undefined request: undefined
Code
if (!this.errors.length) {
const formData = {
username: this.username,
password: this.password1,
};
console.log(formData);
axios.post("/api/v1/users/", formData);
}
Console.log prints the following, so there's no issue with the data:
{username: 'code#code.com', password: 'code'}
A bit surprised as I've set up CORS and djoser exactly as in the tutorial.
This is the relevant code in urls.py:
urlpatterns = [
path('admin/', admin.site.urls),
path('api/v1/', include('djoser.urls')),
path('api/v1/', include('djoser.urls.authtoken')),
]
I'm able to go to http://127.0.0.1:8000/api/v1/users/ and view and post via my browser, so the issue must be with axios, but I'm not sure what it is. Any thoughts?
I realised that I'm getting this error when I input (dummy) passwords that are either short (e.g., 4 letters) or look too similar to the username input. For example, "something#something.com" with password "something" will throw up this error, but more sophisticated passwords won't.
Related
I have an app built with Nuxt.js. To get data from the API I use axios, namely #nuxtjs/axios. All request work fine but for the DELETE method.
My syntax is the following:
async removeItemFromCart(productId) {
const accessKey = await this.$store.dispatch('fetchUserAccessKey');
try {
this.$axios.delete(`/api/baskets/products?userAccessKey=${ accessKey }`, {
data: {
productId: productId
}
})
} catch (error) {
console.log(error);
}
},
However, in the console I always get the following error: createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 400
I tried to use params instead of data, but to no avail. What am I missing here?
It seems that there's an issue with axios: when you use delete method with body, it either doesn't include payload, or deletes Content-type: 'application/json' from headers. To solve the issue, I used .request instead of .delete (according to https://github.com/nuxt-community/axios-module/issues/419)
this.$axios.request(`/api/baskets/products?userAccessKey=${ accessKey }`, {
data: {
productId: productId
},
method: 'delete'
}).
I`m trying to get the token from the spotify API, I use axios. I use the example given by the API as a guide, but give me the error 404
export const getToken = code => async dispatch => {
const responseToken = await axios.post({
url: "https://accounts.spotify.com/api/token",
form: {
grant_type: "authorization_code",
code,
redirect_uri
},
headers: {
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
},
json: true
})
console.log(responseToken);
The first line is because I`m using redux,I just wanted you to see that it was a asinc method.
I have being all day trying to fix this, I don`t have more ideas of how to solve this
Try changing
form: {
grant_type: "authorization_code",
code,
redirect_uri
}
to
data: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri
})
You want to send it in the request body, hence "data", that's how you define it in axios.
Also, I don't think you need json: true
EDIT:
Pretty sure you have to add 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' to the headers as well.
I’m trying to POST using package:http/http.dart, but I’m getting a ClientException with no message:
Uriurl = Uri.https(baseURL, path);
return http.post(url, body: request.params, headers: _headers)
How do I find out what the error is? The path var contains a relative, valid path. If I replace it with some random string, I'm not getting the ClientException anymore.
I didn't find any way to receive the error description, but in my case (sometimes error "HttpException: Connection closed before full header was received" instead of blank error) the call was to an https address using Microsoft Internet Information Services as backend, in the SSL settings of the website in IIS i had mistakenly set "Client certificates: Accept" instead of "Client certificates: Ignore", setting "Ignore" solved the problem.
Just wrap it in a try-catch clause and you should see what error is being thrown.
try {
Uri url = Uri.https(baseURL, path);
return http.post(url, body: request.params, headers: _headers)
} catch (ex) {
print(ex); // This is your error
}
I am making an api call to WuFoo forms
to do a dateCreated filter it needs to look like this (note double quote):
Filter1=DateCreated+Is_greater_than+"2019-11-13 12:00:00"
However, Axios urlencodes it to look like this:
Filter1=DateCreated%2BIs_greater_than%2B%222019-11-13+12:00:00%22'
and WuFoo unfortunately returns incorrect response to that.
I have tried escaping the encoding by using paramSerializer:
const instance = axios.create({
baseURL: 'https://subdomain.wufoo.com/api/v3',
timeout: 1000,
headers: { 'Authorization': 'Basic fjdkalfjkdafldklaskflsdkl' },
paramsSerializer: function(params) { return params }
});
....
instance.get('/forms/form/entries.json',{
params:{
Filter1: qDateFilter
}
})
qDateFilter = DateCreated+Is_greater_than+"2019-11-13 12:00:00"
However I now have the following error:
TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters
at new ClientRequest (_http_client.js:139:13)
at Object.request (https.js:309:10)
at RedirectableRequest._performRequest (/home/node/app/node_modules/follow-redirects/index.js:169:24)
at new RedirectableRequest (/home/node/app/node_modules/follow-redirects/index.js:66:8)
at Object.wrappedProtocol.request (/home/node/app/node_modules/follow-redirects/index.js:307:14)
at dispatchHttpRequest (/home/node/app/node_modules/axios/lib/adapters/http.js:180:25)
at new Promise (<anonymous>)
at httpAdapter (/home/node/app/node_modules/axios/lib/adapters/http.js:20:10)
at dispatchRequest (/home/node/app/node_modules/axios/lib/core/dispatchRequest.js:59:10)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
code: 'ERR_UNESCAPED_CHARACTERS'
}
Attempts to just use a straight full string as a URL don't work either, it still encodes it.
Using straight " in postman works fine, same with curl.
Any other options?
WuFoo got back to me. It wasn't the " it was actually the encoding of the + sign. I replaced with spaces and it worked.
I'm trying to handle an HTTP 500 error using vue-resource (1.2.1) this way:
const resource = Vue.resource('items');
resource.get().then(
(response) => {
// Do something with response.body
},
(error) => {
// Do something with error.body,
// even if the HTTP status code is 500.
// But for now it's null...
}
);
There is nothing in error.body, while the actual server's response have something to say... And I really want to get this data to be displayed in a cool way for my app's users to be aware of what's going on (rather than opening dev tools and inspect network's response data).
Is there something I'm missing in Vue http config? Or maybe server-side, does my API needs to respond in a specific way? Or even respond special headers? Or, is it simply a limitation (or a bug) of vue-resource?
EDIT
Here is the content of error, picked from a console.log:
Response {
body: "",
bodyText: "",
headers: Headers…,
ok: false,
status: 0,
statusText: "",
url: "http://my.domain/items",
data: ""
}
And, the content of the actual server response (which I expected to be into error.body, but is not), picked from "network" tab in dev tools :
{
"success": false,
"error": {
"message":"this is the error message",
"details":[],
"stackTrace":[]
}
}