Question

我有一个react js应用程序。我想在从应用程序返回的每个响应中添加一些http标头。请您提出如何实施此建议！

注意：我不尝试在请求中调用带有标头的任何api。我希望我的react应用在响应中使用一些自定义标题进行响应

Answer 1

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中。

Answer 2

您可以在axios或您可能使用的任何其他库中创建拦截器：-

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

axios.interceptors.response.use(
  function(response) {
    response.headers["custom"] = "custom header value";
    return response;
  },
  function(error) {
    return Promise.reject(error);
  }
);

class App extends React.PureComponent {
  state = {
    data: {}
  };
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/todos/1").then(response =>
      this.setState({
        data: response.data
      })
    );
  }
  render() {
    return <div>{this.state.data.title}</div>;
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

正如评论中的CREATE TABLE table_name ( value ) AS SELECT 'search in this text' FROM DUAL UNION ALL SELECT '"in this text, you should search" said Yoda' FROM DUAL UNION ALL SELECT 'searching text is hard' FROM DUAL UNION ALL SELECT 'we do not want to find text research' FROM DUAL所说，这必须在托管react应用的Web服务器上完成。

例如，如果react app托管在Apache服务器上，则应将响应中的这些http标头添加到Apache服务器conf上。

如何在React js应用的响应中添加HTTP标头

3 个答案: