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>
      );
  }
}

Shubham Khatri · Accepted Answer · 2017-01-06 03:32:56Z

1

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

answered Jan 6, 2017 at 3:32

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ima Miri Over a year ago

Thanks, it works after that I moved the CORS to python. Now, I feel how silly was my question :D. I tried applying this change in request and response on client side but never tried it in server side.

Shubham Khatri Over a year ago

No Problem, it happens will almost all of us :)

Collectives™ on Stack Overflow

How to set header request in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related