CODEWITHSUNDEEP
djangoreactjsdjango-rest-frameworkaxios
peter
peter

Reputation: 1572

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.

Upvotes: 1

Views: 1728

Answers (1)

Ivan
Ivan

Reputation: 2579

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}`},
    }
)

Upvotes: 2

Related Questions