请求时未发送 Cookie

Question

我对使用 API 进行 Web 开发非常陌生。所以我有一个函数可以使用下面的代码向服务器发送请求。它与我存储在 cookie 中的令牌一起发送。

var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Content-Type", "text/plain");

        var raw = "{\n    \"latitude\": \"69.23489236336972000\",\n    \"longitude\": \"-69.08944702148439000\",\n    \"log_start\": \"2020-05-03T09:37:41Z\",\n    \"log_end\": \"2020-05-03T10:00:00Z\"\n}";

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow',
            credentials: 'include',
        };

        fetch("http://127.0.0.1:8000/logs/log/", requestOptions)
            .then(response => response.json())
            .then(result => console.log(result))
            .catch(error => console.log('error', error));

但是，当我尝试发送它时，我不断收到此错误。

https://i.stack.imgur.com/StU0q.png

经过一番挖掘，我注意到我的 cookie 没有随请求一起发送（如下图所示）。这对我来说很奇怪，因为我在 requestOptions 中将“凭据”设置为“包含”。

https://i.stack.imgur.com/Hp1mi.png

但是，当我注释掉将“Content-Type”附加到标题的行时，标题变为空。 cookie 再次包含在标头中，以及最初未包含的其他标头。

var myHeaders = new Headers();
        // myHeaders.append("Content-Type", "application/json");
        // myHeaders.append("Content-Type", "text/plain");

        var raw = "{\n    \"latitude\": \"69.23489236336972000\",\n    \"longitude\": \"-69.08944702148439000\",\n    \"log_start\": \"2020-05-03T09:37:41Z\",\n    \"log_end\": \"2020-05-03T10:00:00Z\"\n}";

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow',
            credentials: 'include',
        };

        fetch("http://127.0.0.1:8000/logs/log/", requestOptions)
            .then(response => response.json())
            .then(result => console.log(result))
            .catch(error => console.log('error', error));

https://i.stack.imgur.com/JJNbB.png

但如果我不将“Content-Type”设置为“application/json”，我会收到“415 Unsupported Media Type”错误。

有谁知道这是为什么？以及如何解决？
先感谢您。


我没有足够的声誉来发布图片，所以我将它们附加为 url

Answer 1

对于初学者，我建议为您的服务器设置 cors 策略，因为当您设置 Content-Type 时，您会收到此错误 当您未设置 Content-Type 时，您将其放入有效负载 application/json 类型，但实际上是您的 Content-Type：plain/text。所以，也许你这个请求的服务器只能处理 json 数据，而不是文本，所以你会出错。但这些只是我的假设

Answer 2

更新

我忘了更新这个，但我已经找到了解决方案。 Cookie 不应该在预检中发送。在您的后端，您必须授予预检权限（特别是 HTTP OPTIONS）。就我而言，我将 Django 与 django-rest-framework 一起使用，因此我的示例解决方案如下所示。

class PreflightsOnly(permissions.BasePermission):
    def has_permission(self, request, view):
        return request.method == "OPTIONS"


class LogAPI(generics.GenericAPIView):

    queryset = Log.objects.all()
    permission_classes = [PreflightsOnly|permissions.IsAuthenticated]
    serializer_class = LogSerializer

5 月 5 日评论

我仍然不知道为什么会发生这种情况。但是，我有一个解决方法可以让它工作。

我所做的是我决定根本不在标题中设置“Content-Type”。所以我不得不坚持使用默认的“Content-Type: text/plain;charset=UTF-8”。因此，为了完成这项工作，我制作了一个接受此“Content-Type”的自定义解析器。

from rest_framework.parsers import BaseParser
import ast

class PlainTextParser(BaseParser):

    """
    Plain text parser.
    """
    media_type = 'text/plain;charset=UTF-8'

    def parse(self, stream, media_type=None, parser_context=None):
        """
        Simply return a string representing the body of the request.
        """
        byte_str = stream.read()
        dict_str = byte_str.decode("UTF-8")
        data = ast.literal_eval(dict_str)

        return data

然后在我的 Django 应用程序的“settings.py”中，我像这样设置 REST_FRAMEWORK DEFAULT_PARSER_CLASSES：

REST_FRAMEWORK = {
    ...,
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework_customs.parsers.PlainTextParser',
    ]
}