javascript 获取响应中缺少标头

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/48413050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 08:00:57  来源:igfitidea点击:

Missing headers in Fetch response

javascriptfetchaxios

提问by william

I need to make a CORS post request. I need to use fetchbecause axios's responseis already processed to json.

我需要制作一个CORS post request. 我需要使用,fetch因为axios'sresponse已经处理为 json。

But in fetchresponse, the headersis empty. But I don't think this is the server problem since axiosresponse headers have the values that I want.

但作为fetch回应,headers是空的。但我不认为这是服务器问题,因为axios响应标头具有我想要的值。

Any trick?

有什么技巧吗?

    fetch('http://localhost:9876/test/sample-download', {
        method: 'post',
        headers: {},
        body: {}
    })
        .then(response => {
            console.log(response);
        })
        .catch(err => console.error(err));

    axios.post('http://localhost:9876/test/sample-download', {}, {})
        .then(response => console.log(response))
        .catch(error => console.error(error));

回答by ccnokes

The Headersclass instance that fetch returns is an iterable, as opposed to a plain object like axios returns. Some iterable's data, such as Headers or URLSearchParams, aren't viewable from the console, you have to iterate it and console.log each element, like:

fetch 返回的Headers类实例是一个可迭代的,而不是像 axios 返回的普通对象。某些可迭代的数据,例如 Headers 或 URLSearchParams,无法从控制台查看,您必须迭代它和 console.log 每个元素,例如:

fetch('http://localhost:9876/test/sample-download', {
    method: 'post',
    headers: {},
    body: {}
})
.then(response => {
  // Inspect the headers in the response
  response.headers.forEach(console.log);
  // OR you can do this
  for(let entry of response.headers.entries()) {
    console.log(entry);
  }
})
.catch(err => console.error(err));

回答by AndyTheEntity

Headers are limited for CORS requests. See https://stackoverflow.com/a/44816592/2047472

标头仅限于 CORS 请求。见https://stackoverflow.com/a/44816592/2047472

(Use access-control-expose-headersto allow exposing headers to requests from a different origin.)

access-control-expose-headers用于允许向来自不同来源的请求公开标头。)

回答by Vijay kumar Pendem

To get a specific header property you can use the following:

要获取特定的标题属性,您可以使用以下内容:

response.headers.get(yourProperty)

回答by Carlos Verdes

Although the correct answer is the one from @AndyTheEntity for me is a little bit incomplete.

虽然正确答案是@AndyTheEntity 对我来说有点不完整。

CORS requests have limitations and show only a subset of headers:

CORS 请求有限制,仅显示标头的子集:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma
  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

In order to show more headers on the response, the serverhas to add a header to allow more extra headers.

为了在响应中显示更多标头,服务器必须添加一个标头以允许更多额外标头。

For example, after a POST request if a new resource is created you should return a 201 CREATED response and add a Locationheader. If you need to accept CORS also you need to add the next headers (on the serverresponse):

例如,在创建新资源的 POST 请求之后,您应该返回 201 CREATED 响应并添加Location标头。如果您还需要接受 CORS,您还需要添加下一个标头(在服务器响应中):

Location: $url-of-created-resource
Access-Control-Expose-Headers: Location

With this you will see on the client the header Location.

有了这个,您将在客户端上看到标题Location

If you need to send an specific header (like a SESSION_ID), then you need to add the next header in the request:

如果您需要发送特定标头(如 a SESSION_ID),则需要在请求中添加下一个标头:

Access-Control-Request-Headers: SESSION_ID
SESSION_ID: $current_session_id

I hope this cover all needs to handle request/response using CORS.

我希望这涵盖了使用 CORS 处理请求/响应的所有需求。