reactjs - 如何使用 javascript fetch API 发送授权、cookie 标头

Question

我正在尝试从在 127.0.0.1:3000 上运行的反应应用程序将授权标头发送到在 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
})

请求被设置为 aOPTIONS而不是 a 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