I am trying to store the data in the form using post method. To do that i have set the permissions as AllowAny. I have checked the POST method using Postman and it works but when I use axios to post the same data it returns 403 error.
I have already tried using fixes provided in the given link description but that add more exceptions. CSRF with Django, React+Redux using Axios
The error description as given in console
Error: Request failed with status code 403
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)
Python django rest framework code
#viewset class from python
class feedbackViewSet(viewsets.ModelViewSet):
queryset = feedback.objects.all()
permission_classes = [
permissions.AllowAny
]
serializer_class = feedbackSerializer
Java script code using axios to POST the data to the server
//axios post method
export const addFeedback = feedback => dispatch => {
axios
.post("/api/feedbacks/", feedback)
.then(res => {
dispatch({
type: ADD_FEEDBACK,
payload: res.data
});
})
.catch(err => console.log(err));
};
Form code contains the on submit methods that are to be called.
//form component code
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { addFeedback } from "../../actions/feedbacks";
export class Form extends Component {
state = {
name: "",
email: "",
description: ""
};
static propTypes = {
addFeedback: PropTypes.func.isRequired
};
onChange = e => this.setState({ [e.target.name]: e.target.value });
onSubmit = e => {
e.preventDefault();
const { name, email, description } = this.state;
const feedback = { name, email, description };
this.props.addFeedback(feedback);
};
render() {
const { name, email, description } = this.state;
return (
//some form generation code
);
}
}
export default connect(
null,
{ addFeedback }
)(Form);
