[翻译]  Ajax is not setting the headers - React with TS

[CHINESE]  Ajax没有设置标题 - 与TS反应


I am using React With Redux and I wrote a middleware that comes in handy when I do Ajax calls in Epics. For example, to do a GET request, I have this getJSON function.

我正在使用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
    });

Everything seem to work fine except that Ajax does not set the headers that contains the access token.

除了Ajax没有设置包含访问令牌的头文件外,一切似乎都能正常工作。

When I step through the code, the headers object looks like this,

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

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

As expected... But when I look through the network calls, it does not contain the specified header with its value.

正如所料......但是当我查看网络调用时,它不包含指定的标头及其值。

Parsed:

解析:

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

Source:

资源:

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

NOTE: Please don't mark this as duplicate. I know there are similar questions on SO, but none of them seem to work for me.

注意:请不要将其标记为重复。我知道在SO上有类似的问题,但它们似乎都不适合我。


After 3 days of pulling my hairs and banging my head on the walls, I finally figure out what is the problem, but still not sure why/how. Apparently due to CORS, there is always OPTION request is made before the actual POST or GET request. Which I already knew and kinda make sense. What does not make sense to me is why the heck it does not contain the headers. If anyone can explain this to me will be eligible for the bounty on this question.

经过3天的拉扯我的头发并将我的头撞在墙上,我终于弄清楚问题是什么,但仍然不确定为什么/如何。显然由于CORS,在实际的POST或GET请求之前总会有OPTION请求。我已经知道了,有点理智。对我来说没有意义的是为什么它不包含标题。如果有人能向我解释这个问题就有资格获得这个问题的赏金。

I had to made changes in my back-end to handle OPTION requests, and it seems to work for now. I can't spend more time of this.

我不得不在我的后端进行更改以处理OPTION请求,它现在似乎有效。我不能花更多的时间。

1 个解决方案

#1


0  

Not sure if it's late enough, but might be useful for future readers.

不确定它是否足够晚,但可能对未来的读者有用。

You should configure your server not to expect for authorization header in OPTIONS request.

您应该将服务器配置为不期望OPTIONS请求中的授权标头。

The Bearer token is used for the POST/GET/DELETE/... confirmation of identity. The OPTIONS is just a preflight to see if the current HOST is allowed to get the data back.

Bearer令牌用于POST / GET / DELETE / ...身份确认。 OPTIONS只是一个预检,看看是否允许当前HOST获取数据。

It's important to say that browsers most of the time remove the custom headers from the OPTIONS request, moving them into the Access-Control-Request-Headers (it's happening in your case).

重要的是,浏览器大部分时间都会从OPTIONS请求中删除自定义标头,将它们移动到Access-Control-Request-Headers中(在您的情况下会发生这种情况)。

Please, take a look on the official documentation here:

请在这里查看官方文档:

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

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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2018 ITdaan.com 粤ICP备14056181号