如何在React应用程序中添加自定义HTTP头？

Question

我有一个React JS 应用程序。我想在该应用程序返回的每个响应中添加一些HTTP标头。请问如何实现！

注意：我不是试图使用请求中的标头调用任何API。我希望我的React应用程序在响应中响应自定义标头。

- i.am.jabi

---

据我所知，这应该在托管React应用程序的Web服务器上完成。 - Dovlet Mamenov

相关：https://dev59.com/wFcP5IYBdhLWcg3weJxR - Jesse Nickles

如果你只是在谈论你的开发环境，请查看这个问题。 - phoenixstudio

Answer 1

如评论中所提到的，这必须在托管React应用程序的Web服务器上完成。例如，如果React应用程序托管在Apache服务器上，则应在Apache服务器配置中添加响应中的这些HTTP标头。

- i.am.jabi

---

这有点不是回答问题，希望有人能提供一个React如何与Nginx / Apache一起工作的示例。 - Jesse Nickles

Answer 2

const header = new Headers();
header.append('Access-Control-Allow-Origin', '*');

const body = {
  author: author,
  text: text
}

axios.post("https://api.test/posts/create", body, header)
  .then((res) => {
    this.setState({
      result: res
    });
  })
  .catch((error) => {
    this.setState({
      error: error.message
    });
  })

你需要使用原生对象 Headers，并将其添加到 axios 中。

- Rémi Rodrigues

---

在 "axios.post("https://api.test/posts/create", body, header)" 中，这个 url 是什么？我没有调用任何 api。我有一个 Web 应用程序（一个 React 应用程序），它是从浏览器中调用的。我想添加响应头并在浏览器开发工具中查看头信息。 - i.am.jabi

好的，我以为你想要将内容发布到API上。 这个URL只是一个例子。 - Rémi Rodrigues

不行。我想在React应用程序的响应中添加标头。 - i.am.jabi

这绝对是不正确的，你试图在请求头中添加响应头，这是不可行的！顺便说一下，语法也不正确，你需要将一个对象作为第三个参数传递，像这样：{headers: { 'SOME_HEADER_KEY': 'SOME_VALUE' } } - Arman Safikhani