Question

我正在使用React With Redux，我编写了一个中间件，当我在Epics中进行Ajax调用时，它很方便。例如，要执行一个GET请求，我需要这个getJSON函数。

import {ajax, AjaxResponse} from "rxjs/ajax";

const getJSON = (url: string, headers?: Object): Observable<AjaxResponse> =>
    ajax({
        method: "GET",
        url,
        responseType: "json",
        headers,
        withCredentials: true
    });

除了Ajax不会设置包含访问令牌的标头之外，其他所有内容似乎都可以正常工作。

单步执行代码时，headers对象看起来像这样，

{
    Authorization: "Bearer ey-SOME-ACCESS-TOKEN"
}

按预期...但是当我浏览网络呼叫时，它不包含指定的标头及其值。

已解析：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:1337
Origin: http://localhost:3000

来源：

OPTIONS /api/test HTTP/1.1
Host: localhost:1337
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

注意：请不要将此标记为重复。我知道在SO上也有类似的问题，但是似乎没有一个对我有用。

经过3天的拔毛和撞头撞墙后，我终于弄清了问题所在，但仍然不确定原因/方式。显然由于CORS，在实际的OPTION或POST请求之前总是有GET个请求。我已经知道并且有点道理。对我而言，没有意义的是为什么它不包含标头。如果有人可以向我解释这一点，就有资格获得这个问题的奖励。

我必须在后端进行更改以处理OPTION请求，并且目前看来，该请求仍然有效。我不能再花时间了。

Answer 1

不确定是否已经晚了，但可能对将来的读者有用。

您应该配置服务器，不要在OPTIONS请求中使用authorization头。

Bearer令牌用于POST / GET / DELETE / ...身份确认。 OPTIONS只是一个preflight，用于查看是否允许当前的HOST取回数据。

很重要的一点是，浏览器大多数时候会从OPTIONS请求中删除自定义标头，然后将其移至Access-Control-Request-Headers中（这是您的情况）。

请在这里查看官方文档：

https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

Ajax没有设置头文件-与TS一起反应

1 个答案: