2017-04-03 117 views
2

我使用ReactJSCREATE-反应,应用建立一个简单的Web应用程序。提取API响应头不显示

我有一个后端API设置在Heroku,我可以让POST请求。一切正常,除了:

当我使用fetch API发出POST请求时,响应100%正确,但它只给我2个标准头。我想获得我的自定义标题。我在我的回复中添加了公开标题,这里是情节变化:当我从Chrome Inspection Tool或Postman(API工具)查看标题时,它会显示所有标题,包括我的自定义标题。这里是我使用的取出码 -

fetch(theUrl, { 
    method: 'POST', 
    body: JSON.stringify({ 
    "placeholder": "placeholder" 
    }) 
}) 
.then(function(res) { 
    console.log(res.headers.get('CUSTOM_HEADER_NAME')); 
}) 

如果这有什么差别,这取方法是从ReactJS组件的主体之外的函数调用。

自定义标题的名称是Image-Identification-Path,并且我的响应标题中的标题为的Access-Control-Expose-HeadersHere's the image from Postman

摘要:如何使用fetch获取自定义标题?

+0

这是一个交叉来源请求?当你说*“我在我的回复中添加了公开标题”*时,你的意思是你已经将自定义标题的名称添加到Access-Control-Expose-Headers响应标题的值中了? – sideshowbarker

+0

是的,这是一个跨域请求。我现在在localhost上运行我的应用程序。我通过在Heroku上上传我的应用程序来测试了这一点,但它给出了相同的结果。 此外,我已将自定义标头的名称添加到Access-Control-Expose-Headers响应标头的值中。 – Fahmid

+0

您的屏幕快照显示您在Access-Control- * Allow * -Headers标题的值中包含Image-Identification-Path标题名称。您需要将其设置为Access-Control- * Expose * -Headers标题的值。 (Access-Control-Allow-Headers用于列出自定义*请求*标头名称。) – sideshowbarker

回答

3

您必须配置请求将要发往的服务器,以便其响应具有一个Access-Control-Expose-Headers标头,其值包含您的自定义响应标头的名称。否则,如果您的浏览器在该Access-Control-Expose-Headers标题中看不到您的自定义标题的名称,它将不会让您访问您的自定义响应标题的值。

在这种情况下,如果您看看Postman中的响应或者您的浏览器devtools中的响应,您仍然可以看到自定义标题。

但是,仅仅因为浏览器在响应中获得自定义标头并不意味着浏览器会将其暴露给您的客户端JavaScript代码。

对于跨源请求,如果该头名称的值为Access-Control-Expose-Headers头部,浏览器将仅向客户端代码公开该自定义响应头。

+1

感谢您的回答,但正如我在我的问题中所说的,我已在服务器响应标头中包含Access-Control-Expose-Headers标头。 – Fahmid

+0

那么你的自定义响应头的名称是什么? Access-Control-Expose-Headers有什么价值?请使用https://stackoverflow.com/posts/43175710/edit更新/编辑您的问题以包含该信息。否则这里的任何人都很难想象问题的原因可能是什么 – sideshowbarker

+0

对于任何面临同样问题的人来说,这个答案是正确的,这只是我添加了Access-Control-Allow-Headers而不是Access-Control-Expose-Headers – Fahmid