Axios headers work for Django GET request, but not PUT request

I can sucessfully make a GET request on my /rest-auth/user/ api with axios and this header

{headers: { 'authorization': `Token ${token}`}}

But when I try to make a PUT request, I get 401 unauthorized. This is the full code of my request:

export const addCountry = (countries) => {
  const token = localStorage.getItem('token');
  return dispatch => {
    dispatch(addCountryPending());
    axios.put(
        'http://localhost:8000/api/v1/rest-auth/user/',
        {headers: { 'authorization': `Token ${token}`}},
        {countries: countries}
    )
      .then(response => {
        const user = response.data;
        dispatch(addCountryFulfilled(user));
      })
      .catch(err => {
        dispatch(addCountryRejected(err));
      })
  }
}

and my Django permissions are set as

REST_FRAMEWORK = {
   'DEFAULT_AUTHENTICATION_CLASSES': [
       'rest_framework.authentication.TokenAuthentication',
   ],

Does anyone know what I'm doing wrong? Thanks!

edit: The view is the default /rest-auth/user/ view, but I customized the serializer to look like this:

class UserDetailSerializer(UserDetailsSerializer):
    countries = serializers.SlugRelatedField(
        many=True, slug_field='name',
        queryset=Country.objects.all().order_by('pk')
        )
    count = serializers.IntegerField(read_only=True)

    class Meta:
        model = User
        fields = ('pk', 'username', 'email', 'count', 'countries')

and I have a custom user model:

class User(AbstractUser):
    countries = models.ManyToManyField(Country, blank=True)
    count = models.IntegerField(blank=True, default=0)

    def save(self, *args, **kwargs):
        # Must save model before Many To Many relationship can be used.
        super(User, self).save(*args, **kwargs)
        self.count = self.countries.count()
        super(User, self).save(*args, **kwargs)

I'm trying to send a PUT request with a country to add that country to the country list for the authenticated user.

1 answer

  • answered 2018-11-08 16:35 Iwan

    In axios functions get and put has different semantics. The get functions get configuration object like the second parameter:

    axios.get(url[, config])
    

    And the put function like the third parameter:

    axios.put(url[, data[, config]])
    

    So you should add your headers like this:

    axios.put(
        'http://localhost:8000/api/v1/rest-auth/user/',
        {}, // data
        {
            countries: countries,
            headers: { 'authorization': `Token ${token}`},
        }
    )