如何使用JavaScript Fetch API发送授权，Cookie标头

Question

我正在尝试从运行在127.0.0.1:3000上的React应用程序向运行在127.0.0.1:8888上的API端点发送授权标头。

var data = new URLSearchParams();
data.append('code', code);
fetch('http://localhost:8888/users/verifyEmail', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'authorization': 'Bearer '+ bearer,
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: data
})

请求被设置为OPTIONS而不是POST。

在接受请求的端点中，我设置了标头

header('Access-Control-Allow-Origin: http://localhost:8888/');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: authorization, bearer, content-type, accept');

Answer 1

您需要mod_proxy模块并设置ProxyPass指令：

ProxyPass /api http://127.0.0.1:8888 
ProxyPassReverse /api http://127.0.0.1:8888

然后在您的React应用程序中，所有对https://example.com/api的http请求（您可以使用`${window.location.origin}/api`避免对您的网站URL进行硬编码）将被代理到您的服务器，并保留cookie。

Answer 2

Access-Control-Allow-Origin上的端口应为 3000