title: Forbidden (403) in a post request - djangorest-react
body: <p>I have an endpoint for users registration.
  I use react for my front side of project. I send POST request to the endpoint with json body to register user.
  but it return's Forbidden (403).
  When I use postman to test functionality everything is Ok but with axios It is not.</p>
  
  <p><strong>Error</strong>: POST /user/register/ 403 (Forbidden)</p>
  
  <p><strong>endpoint</strong>: user/register/</p>
  
  <p><strong>Register API View:</strong></p>
  
  <pre><code>class UserRegisterAPIView(APIView):
      serializer_class = UserRegisterSerializer
      permission_classes = [permissions.AllowAny]
  
      def post(self, request, format=None, *args, **kwargs):
          print(request.data)
          serializer = UserRegisterSerializer(data=request.data)
          serializer.is_valid(raise_exception=True)
          user = serializer.save()
          user_data = serializer.validated_data
          return Response(user_data)
  </code></pre>
  
  <p><strong>Register Serializer:</strong>
  I used django's default model User</p>
  
  <pre><code>from django.contrib.auth.models import User
  class UserRegisterSerializer(serializers.ModelSerializer):
      password2   = serializers.CharField(
          style={'input_type': 'password'})
  
      class Meta:
          model = User
          fields = ["username", "email", "password", "password2"]
          extra_kwargs = {
          'password': {'write_only': True},
          'password2': {'write_only': True}
          }
  
      def validate(self, data):
          password    = data.get('password')
          password2   = data.pop('password2')
  
          if len(str(password)) &lt; 5:
              raise serializers.ValidationError("Password is too short.")
          if password != password2:
              raise serializers.ValidationError("Passwords don't match.")
          return data
  
      def create(self, validated_data):
          username = validated_data.get('username')
          email    = validated_data.get('email')
          password = validated_data.get('password')
  
          user = User.objects.create_user(username=username, email=email,
                  password=password)
  
          if user and user.is_active:
              return user
  </code></pre>
  
  <p><strong>Register Component:</strong>
  I've imported action <strong>register</strong>.</p>
  
  <p>Note: I deleted other input fields to decrease code </p>
  
  <pre><code>export class Register extends Component {
  
    state = {
      username: '',
      password: '',
      password2: '',
      email: '',
    }
  
    onChange = (e) =&gt; this.setState({ [e.target.name]: e.target.value })
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.register(this.state)
    }
  
    render() {
      return (
        &lt;div className="col-md-6 m-auto"&gt;
          &lt;div className="card card-body mt-5"&gt;
            &lt;form onSubmit={this.onSubmit}&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Username&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  name="username"
                  onChange={this.onChange}
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;button type="submit" className="btn btn-primary"&gt;
                  Register
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;p&gt;
                Already have an account? &lt;Link to="/login"&gt;Login&lt;/Link&gt;
              &lt;/p&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  export default connect(null, { register })(Register);
  </code></pre>
  
  <p><strong>Action:</strong></p>
  
  <pre><code>export const register = ({
    username,
    password,
    password2,
    email
  }) =&gt; dispatch =&gt; {
    const config = {
      headers: {
        'Content-Type': 'application/json',
      }
    }
    const body = JSON.stringify({
      username,
      password,
      password2,
      email
    });
  
    axios.post('/user/register/', body, config)
      .then(res =&gt; {
        dispatch({
          type: REGISTER_SUCCESS,
          payload: res.data
        })
      }).catch(err =&gt; {
        dispatch({
          type: REGISTER_FAIL,
          payload: err
        })
        console.log(err)
      })
  }
  </code></pre>
  
  <p><strong>Reducer:</strong> </p>
  
  <pre><code>import { REGISTER_SUCCESS, REGISTER_FAIL } from './../actions/types';
  
  const initialState = {
    user: null,
    error: null,
  }
  
  export default function (state = initialState, action) {
    switch (action.type) {
      case REGISTER_SUCCESS:
        console.log("Register success")
        return {
          ...state,
          user: action.payload,
        }
      case REGISTER_FAIL:
        return {
          ...state,
          user: null,
          error: action.payload
        }
      default: {
        return state;
      }
    }
  }
  </code></pre>