Vue axios 不向服务器发送标头（django simplejwt）

Posted 2023-02-24

【中文标题】Vue axios 不向服务器发送标头（django simplejwt）

【英文标题】：Vue axios not sending headers to server (django simplejwt)

【发布时间】：2021-12-20 15:38:03

【问题描述】：

它在邮递员中运行良好。但是当我从 Vue 发出 axios 请求时出现此错误。

：

'Authentication credentials were not provided.'

如果我在邮递员中编写一些自定义标头，我可以在 request.headers 中看到它。 但是如果我在 axios 中构造标题，则其中没有标题信息。

组件.vue

test_auth: function()

  var accessToken = this.$store.state.accessToken;
  console.log(accessToken);
  axios.get('http://django:8000/api/uvs/',headers:
    'Authorization':`Bearer $accessToken`,
    

   )
    .then(function (response) 
      console.log(response);
    )
    .catch(function (error) 
      console.log(error.response.data);
    );

,

和我的服务器设置

CORS_ALLOWED_ORIGINS = [
    "http://django:8080",
    "http://django",
    "http://127.0.0.1",
    "http://vue:8080",
    "http://vue",
]
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True



REST_FRAMEWORK = 

    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ],

    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',

    )


SIMPLE_JWT = 
 

    'AUTH_HEADER_TYPES': ('Bearer',),
 

和views.py

class UserSerializer(serializers.Serializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'is_staff')



class UserViewSet(viewsets.ModelViewSet):
    serializer_class = UserSerializer
    queryset = User.objects.all()
    permission_classes = [IsAuthenticated]

【参考方案1】：

好的，问题来自axios.get 我不知道为什么，但是当我使用axios.create() 并使用intercepter 为每个请求添加带有授权令牌的标头时它可以工作。 然后我打电话给axios_instance.get，然后我可以通过标头发送我的令牌。