如何使用 javascript fetch API 发送授权、cookie 标头答案

【问题标题】：How to send authorization, cookie headers with javascript fetch API如何使用 javascript fetch API 发送授权、cookie 标头
【发布时间】：2018-07-09 23:17:42
【问题描述】：

我正在尝试从在 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
})

请求被设置为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');

【问题讨论】：

试试这个：从标题中删除authorization，并将其作为对象传递给单独的prop auth，如headers。
你的错误是什么？

标签： reactjs apache localhost

【解决方案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。

【讨论】：

这是加在apache2/httpd.conf`文件还是.htaccess文件中？
应该在httpd.conf。
谢谢。这行得通。我添加了<IfModule proxy_module> ProxyPass /api http://localhost:8888 ProxyPassReverse /api http://localhost:8888 </IfModule>，它在启动 apache 后工作。

【解决方案2】：

Access-Control-Allow-Origin 的端口应该是 3000

【讨论】：