离子电容器 WebView：不接受来自根域的 Cookie

Question

我正在尝试使用离子电容器构建一个应用程序。应用程序应使用 cookie 供用户登录。假设服务器是example.com，并且 Capacitor WebView 中的应用程序托管在localhost或下myapp.example.com（通过更改 中的“服务器 --> 主机名” capacitor.config.json）。问题是，当我从应用程序向服务器发出 xhr 请求时，Set-Cookie响应中的标头不被接受。以下是请求和响应的示例：

要求：

Host: example.com
Origin: https://myapp.example.com
Referer: https://myapp.example.com/
Content-Type: application/json

回复：

Access-Control-Allow-Methods: GET, POST, DELETE, PUT, OPTIONS, HEAD
Access-Control-Allow-Origin: *
Set-Cookie: a=something; Domain=example.com; Path=/; HttpOnly; Secure
X-Frame-Options: sameorigin

如何让 WebView 接受 cookie？实际应该设置哪些标头（Access-Control-Allow-*、Set-Cookie 等）？xhr-request 中还有我缺少的其他特殊设置吗？

Answer 1

经过一番实验，我们找到了问题的解决方案：

1. 在服务器端，我们需要使用这些标头响应预检请求（选项）

Access-Control-Allow-Credentials: true (!important)
Access-Control-Allow-Origin: (exact origin from request)
Access-COntrol-Allow-Methods: (allowed Methods)
Access-COntrol-Allow-Headers: (allowed header names)

2. 在客户端，我们需要将withCredentialshttp-requests 设置为 true。在 Angular 中，我们可以简单地将选项添加withCredentials到拦截器中的所有请求中。

然后Set-Cookieheader 在客户端 WebView 中起作用。不要忘记在此标头中设置Domain属性。例如

Set-Cookie: a=something; Domain=example.com; Path=/; HttpOnly; Secure