http响应未在浏览器中设置cookie

Question

TLDR：

以下 response header 没有在浏览器中设置 cookie:

Access-Control-Allow-Origin: *
Allow: GET, HEAD, OPTIONS
Content-Length: 7
Content-Type: application/json
Date: Tue, 27 Apr 2021 15:58:02 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.9.4
Set-Cookie: csrftoken=r5r2YcZZvJKs79cbLd24VSyNscpUsxJB6UuWiWO2TXriy6B4r8KDZrwSDyI091K1; expires=Tue, 26 Apr 2022 15:58:02 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Vary: Accept, Cookie, Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

我的 request headers:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Host: 127.0.0.1:8000
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36

我是 Django 的新手，react 和“http header”相关的东西。

我的 Django 开发服务器运行于：

http://127.0.0.1:8000/

我的 React 开发服务器运行在：

http://127.0.0.1:3000

为了访问该网站，需要登录。因此，通过配置 react-router and following this template，所有未经授权的请求都会首先重定向到登录页面。所以，到目前为止，还没有 api 调用。
为了post登录数据，我需要服务器设置csrf令牌。但是由于我没有进行任何 api 调用，我明确地创建了一个端点 /api/csrf/ 来设置 csrf 令牌。

# URL: /api/csrf/
class CSRFGet(APIView):
    """
    Explicitly set csrf cookie
    """

    @method_decorator(ensure_csrf_cookie)
    def get(self, request):
        return Response('hello')

我调用这个端点，当挂载 useProvideAuth 钩子时。

function useProvideAuth() {
    const [token, setToken] = useState(null);

    const login = (username, password) => {
        return axios.post(
            '/auth/',
            {
                username: username,
                password: password
            })
            .then(response => {
                setToken(response.token) 
            })
    }

    useEffect(()=> {
        axios.get(
            '/csrf/'
        )
    },[])

    return {
        token,
        login,
    }
}

为了检索和设置此 cookie，我遵循了 official Django docs. I also enabled CORS policy using django-CORS-headers allow all origins。

现在，当我向任何页面发出请求时，它会重定向到登录页面，我可以看到 api/csrf/ 响应：

Set-Cookie: csrftoken=LgHo2Y7R1BshM4iPisi5qCXhdHyAQK7hD0LxYwESZGcUh3dXwDu03lORdDq02pzG; expires=Tue, 26 Apr 2022 06:29:23 GMT; Max-Age=31449600; Path=/; SameSite=Lax

但是，cookie 根本没有设置。为什么会这样？

我获取 csrf cookie 的方法是否正确？如果我用这种方法造成任何安全漏洞，请告诉我。

Answer 1

您可以尝试将以下内容添加到 django-cors-headers 配置中并重试吗？

CORS_ALLOW_CREDENTIALS = True

此外，请注意，如果您允许所有来源，上述配置可能无法正常工作。请参阅此 Mozilla 文档：Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’

如果你遇到这样的错误，我建议设置：

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000",
]

或者更高级的东西，比如：

CORS_ALLOWED_ORIGIN_REGEXES = [
       r"^http://127.0.0.1:[0-9]{1,4}$",
]

最后，请确保您使用的是 django-cors-headers 版本 >= 3.5，因为上面的 2 个配置当时有不同的别名。

如果有效，请告诉我，我很好奇。

Answer 2

原来问题是，我正在使用 http://127.0.0.1:8000 进行 api 调用，而我的服务器在 http://localhost:8000 上。因此，host 和 origin 在我的 request headers 中不匹配相同的域。

Cookie 可以在同一个域下使用，different ports and subdomains, unlike Same-Origin policy，但不能使用 cross-domains。

在我的例子中，我猜想 http://127.0.0.1:8000 和 http://localhost:8000 被认为是不同的域，因此浏览器没有设置我的 cookie。

感谢 Anas Tiour、 关于 Allow-Credentials 的说明。我也试过，但直到我找到真正的原因之前仍然没有运气。

http响应未在浏览器中设置cookie

http response not setting cookie in the browser

django

cookies

http-headers

django-rest-framework

reactjs

TLDR：