1

When i'm integrate react with flask(python) image upload. last time also a i'm face this issue. Access to fetch at 'http://ip/abc/qwerty.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

class VApiPage extends React.Component {
    constructor(props) {
    super(props);
        this._path= this._path.bind(this);
        this.state={
            flag:1,
            path: "",
            res:"",
            img:""
        }
    }

    _path(e){
        this.setState({
            path:e.target.value
        });

    }

    _results(){
        let img1= this.state.path;
        let str1;
        let str;
        this.setState({img:img1});

            str="http://0.0.0.0:4000/"+ str1 +"/"+this.state.path;

        fetch(str, {
            method: "POST",
            headers: {
                "Access-Control-Allow-Origin": "*"
        },
    })

        .then(res => res.json())
        .then(res => {
              if(window.location.pathname.split("/")[4]==="gender"){
                    this.setState({
                    res: res.Gender
                });
            }
            else if(window.location.pathname.split("/")[4]==="emotion"){
                this.setState({
                res: res.Emotion
            });
        }

            });
    }

    render() {
    return (
      <div className="analysis">

        <div className="col-md-3" />

          <div className="col-md-6 visionresult">


        </div>

        <div className= "col-md-12 test">

          <div className="col-md-1 url">
                    <form>

                    <input type = "file" name = "image" onChange={(e)=>{console.log(e.target.files[0].name);
                                                                                                                             this.setState({path:e.target.files[0].name,
                                                                                                                                                            img:e.target.files[0].name});}}/>

                    </form>
           </div>

          <div className="col-md-8 " >
            <textarea className="links" onChange={(e)=>this._path(e)} placeholder="" cols="100" rows="1"></textarea>
          </div>

                </div>

                    <div className={this.state.flag===1?"col-md-1 results":""} onClick={()=>this._results()}>
                        <button type="button" className="btn btn-outline-secondary">Analysis</button>
                    </div>

                    <div className="col-md-12">
                    <div className="col-md-2 imgdisplay">
                        <img src={this.state.img} width="100px" height="100px" alt="invalid image"/>

                    </div>
                    <div className="col-md-2 displayresult">

                            <div>{this.state.res}</div>
                    </div>
                </div>

      </div>

    );
    }
}

export default VApiPage;
Sai Manikanta Guggilam
  • 11
  • 1
  • 4
  • Possible duplicate of [Response to preflight request doesn't pass access control check](https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check) – domdambrogia Feb 23 '19 at 00:53
  • You're receiving a pretty clear error message. Your CORS settings are incorrect. This has been answered many times and a simple google / stack overflow search of your error yields many results [like this one](https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check) that has already been solved. – domdambrogia Feb 23 '19 at 00:55
  • I disagree, this is a python-flask question and should have a dedicated answer. I am personaly looking for a solution as to how to pass the proper parameters to flask-cors in order to avoid that error – Yohan Obadia Dec 10 '20 at 17:49

0 Answers0