How to set header request in reactjs

Question

I'm trying to set Access-Control-Allow-Origin to be able to skip the following error:

XMLHttpRequest cannot load http://www.test.dev:8090/glasses/import/log/qa/qa2/20170106?headers%5BAc…llow-Headers%5D=Origin%2C%20X-Requested-With%2C%20Content-Type%2C%20Accept. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.test.dev:3000' is therefore not allowed access.

But I'm not getting the desired result. The client side is implemented in reactjs and send a get request to a python web app. Here is my code:

class InfoBox extends Component {
  constructor() {
    super();
    this.state = {items:[]};
  }

  componentDidMount() {
    Request.get('http://www.test.dev:8090/glasses/import/log/qa/qa2/20170106', {
      headers:{
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
      }
    }) 
      .then((response) => {
      this.setState({items:response});
    });
  }
  render() {
      const content = this.state.items.map(function(item) {return <div>{item}</div>});
      return (
        <div >{content}</div>
      );
  }
}

Show source
| reactjs   | security   | python   2017-01-06 04:01 1 Answers

Answers to How to set header request in reactjs ( 1 )

  1. 2017-01-06 04:01

    CORS is not enabled from the client side, rather the server side.

    In a normal http request, the browser will initially send an options request, to verify that the source has the permission to access the resources. The server will respond back with the Access-Control-Allow-Origin header. If the source is mentined in the headers, browser will then send the Appropriate PUT, POST, GET, DELETE request.

    You need to specify these header in you python server reponse

Leave a reply to - How to set header request in reactjs

◀ Go back