我正在用React和Redux构建一个前端应用程序,我正在使用axios来执行我的请求。我想访问响应头中的所有字段。在我的浏览器中,我可以检查标题,我可以看到我需要的所有字段都是存在的(如令牌,uid等…),但当我调用

const request = axios.post(`${ROOT_URL}/auth/sign_in`, props);
request.then((response)=>{
  console.log(response.headers);
});

我只是

Object {content-type: "application/json; charset=utf-8", cache-control: "max-age=0, private, must-revalidate"}

这里我的浏览器网络选项卡,正如你可以看到的所有其他领域都存在。

最好成绩。


当前回答

这真的帮助了我,谢谢Nick Uraltsev的回答。

对于那些使用cors的nodejs的人:

...
const cors = require('cors');

const corsOptions = {
  exposedHeaders: 'Authorization',
};

app.use(cors(corsOptions));
...

在这种情况下,您以res.header('Authorization', ' Bearer ${token} ').send()的方式发送响应;

其他回答

对于CORS请求,浏览器默认只能访问以下响应头:

cache - control 内容语言 内容类型 到期 last - modified 编译指示

如果你想让你的客户端应用能够访问其他头文件,你需要在服务器上设置access - control - expose - headers头文件:

Access-Control-Expose-Headers: Access-Token, Uid

由于CORS的限制,客户端无法访问自定义HTTP标头。您需要在服务器端添加Access-Control-Expose-Headers设置。

什么是Access-Control-Expose-Headers? 请登录https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

默认情况下,只有这些HTTP报头是公开的:

cache - control 内容语言 内容长度 内容类型 到期 last - modified 编译指示

对于自定义HTTP报头,需要在响应报头中自定义Access-Control-Expose-Headers。

如果你在服务器端使用Django,你可以使用Django - CORS -headers (https://pypi.org/project/django-cors-headers/)进行CORS设置管理。

例如,使用django-cors-headers,你可以添加一个HTTP头列表,通过CORS_ALLOW_HEADERS设置向浏览器公开

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

在这次谈话中还有一个暗示。 asp.net core 3.1 首先添加一个键,你需要把它放在头部,就像这样:

Response.Headers.Add("your-key-to-use-it-axios", "your-value");

在你定义cors策略的地方(通常是在Startup.cs中),你应该像这样将这个键添加到WithExposedHeaders中。

          services.AddCors(options =>
        {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("your-key-to-use-it-axios"));
        });
    }

你可以在这里添加所有的键。 现在,在您的客户端,您可以通过使用响应结果轻松地访问“使用它的密钥”。

          localStorage.setItem("your-key", response.headers["your-key-to-use-it-axios"]);

你可以在所有客户端使用它,像这样访问它:

const jwt = localStorage.getItem("your-key")

如果你在后端使用Laravel 8,正确配置CORS,添加这一行到config/ CORS .php:

'exposed_headers' =>['授权'],

根据官方文件:

如果您需要服务器响应的HTTP报头,这可能会有所帮助。所有标头名称都是小写的,并且可以使用括号符号访问。例如:响应。Headers ['content-type']将给出如下内容: