Angular 4 对 Django Rest 框架的 HTTP 请求

Question

我在从 Angular 4 发送到我创建的 Django Rest Framework API 的 HTTP 请求中的（我认为）授权标头相关的问题的任何地方找到答案时遇到问题。让我们开始吧：

编辑： 确认问题与授权有关，因为我现在也在使用 django-cors-headers 来摆脱 4200 端口的 CORS 问题（因为它被认为是不同的来源）。剩下的问题只是我在向 API 发出请求时收到“未经授权”的消息。我开始认为这是一个编码问题，因为当我尝试使用 httpie 进行以下请求时会显示以下消息：

http GET http://localhost:8000/api/groups/ "Authorization: Basic admin:password"

然后显示消息：

{
    "detail": "Invalid basic header. Credentials not correctly base64 encoded."
}

在 settings.py 中，我确保权限类和身份验证类都可用。

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
    'rest_framework.authentication.BasicAuthentication',
],
'DEFAULT_PERMISSION_CLASSES': [
    'rest_framework.permissions.IsAdminUser'
],

...

CORS_ORIGIN_WHITELIST = [
    'localhost:4200',
]

在views.py中，这可能是我的错，因为我在尝试从Angular发送请求时遇到控制台错误-> Rest API是'No'Access-Control-Allow-Origin'标头存在请求的资源。这是不真实的，因为当我删除身份验证需求时它不会抱怨这一点。

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer
    permission_classes = (IsAdminUser, )
    authentication_classes = (BasicAuthentication, )

    def list(self, request):
        queryset = User.objects.all().order_by('-date_joined')
        serializer = UserSerializer(queryset, many=True, context={'request': request})
        return Response(serializer.data,
                        status=200)

Angular 开发服务器在 localhost:4200 上运行，而 django 保留在其默认的 localhost:8000 上。

我将包含 urls.py 以作好衡量：

from django.conf.urls import url, include
from rest_framework import routers
from backend.api import views
from django.contrib import admin

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)
router.register(r'info', views.InfoViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^admin/', admin.site.urls),
]

请注意，我可以使用 httpie 使用授权标头发出请求并获得响应，如下所示：

http GET http://localhost:8000/api/users/ -a admin:password

最后，这是发出请求的 Angular 代码（我包含了所有内容，以便也可以检查导入）：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results: string[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {

    this.http.get(
      'http://localhost:8000/api/users/',
      { headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
      ).subscribe(
        data => {
          this.results = data;
      },
        err => {
          console.log("ERROR RETREIVING USERS");
      });
  }
}

我还导入了 HttpClientModule 并将其列在我的 app.module 中的“导入”下。

Answer 1

不同的端口被认为是不同的来源，因此您当然会在 localhost 上收到跨域错误 (CORS)。这是与您的服务器一起的浏览器安全功能。

安装 django-cross-header 包解决跨域错误。

Answer 2

我使用相同的后端框架，我找到的解决方案是使用正确的主机构建我的项目

ng build --production -host=myDomain.com // try localhost -p 8080 in your case

并替换

Access-Control-Allow-Origin: 'http://localhost:4200'

与

Access-Control-Allow-Origin: '*'

Answer 3

问题通过两种方式解决。首先，我没有正确确保从 Angular 4 发送请求的源点启用 CORS。 @kmcodes 使用 django-cors-headers 的解决方案是一个很好的解决方案，在将它添加到我的项目后，我不再遇到“Access-Control-Allow-Origin”丢失的问题。

问题的第二部分是在我为 Angular 4 发送的请求添加的标头中。以下是我需要进行的更改：

this.http.get(
      'http://localhost:8000/api/users/',
      { headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
      ).subscribe(
        data => {
          this.results = data;
      },
        err => {
          console.log("ERROR RETREIVING USERS");
      });

到这里：

this.http.get(
      'http://localhost:8000/api/users/',
      { headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('admin:password')), }
      ).subscribe(
        data => {
          this.results = data;
      },
        err => {
          console.log("ERROR RETREIVING USERS");
      });

我在使用 httpie 检查我的请求时得到了提示，并看到当我没有使用 -a 标志添加身份验证参数而是使用“授权”标头时。这给了我一个错误，指出请求失败，错误代码 401，未经授权，因为用户名：密码部分未使用 base64 编码。在 Angular 4（可能之前）中， btoa() 解决了这个问题。