Flask & NextJS - CORS not working for POST-CodePudding

I am serving my machine learning model on Flask as a POST request.

I am able to successfully make a POST request in Postman, however, on the client, I receive a CORS error when trying to fetch that endpoint in Next.

I have the following server.py

from flask import Flask, request, jsonify
import pickle
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app)

@app.route('/predict', methods=['POST'])
def predict():
    if request.method == 'POST':
        data = request.get_json()
        sentence = data['sentence']
        vectoriser, LRmodel = load_models()
        if vectoriser and LRmodel:
            vector = vectoriser.transform([sentence])
            prediction = LRmodel.predict(vector)
            # return jsonify({'prediction': str(prediction[0])})
            if prediction[0] == 1:
                return jsonify({'prediction': 'Positive'})
            else :
                return jsonify({'prediction': 'Negative'})
        else:
            return jsonify("Error")
    return 'Error'


if __name__ == '__main__':
    app.run(debug=True)

Here is how I am trying to call this endpoint on the client

const Sentiment = (props: any) => {
  return (
    <>
      <h1 style={{ textAlign: 'center' }}>Sentiment</h1>
      <div style={{ textAlign: 'center' }}>
        <form action="/sentiment" method="POST" onSubmit={handleSubmit}>
          <input type="text" name="sentiment" />
          <button type="submit">Submit</button>
        </form>
      </div>
    </>
  )
}

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  console.log(e.currentTarget.sentiment.value)
  const res = await fetch('http://127.0.0.1:5000/sentiment', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ sentence: e.currentTarget.sentiment.value }),
  })
  await res.json()
}
export default Sentiment

I get this error: Access to fetch at 'http://127.0.0.1:5000/sentiment' 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.

Also when I submit the form I am getting "OPTIONS /sentiment HTTP/1.1" 404 - Instead of a POST

Any ideas on what I am doing wrong?

CodePudding user response：

try setting constructor like this

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})

if that doesn't work try adding cross_origin decorator

from flask_cors import CORS,cross_origin

@app.route('/predict', methods=['POST'])
@cross_origin()
def predict():
    if request.method == 'POST':
        data = request.get_json()
        sentence = data['sentence']
        vectoriser, LRmodel = load_models()
        if vectoriser and LRmodel:
            vector = vectoriser.transform([sentence])
            prediction = LRmodel.predict(vector)
            # return jsonify({'prediction': str(prediction[0])})
            if prediction[0] == 1:
                res =  jsonify({'prediction': 'Positive'})
                 res.headers.add("Access-Control-Allow-Origin", "*")
                  return res
            else :
                res =  jsonify({'prediction': 'Positive'})
                 res.headers.add("Access-Control-Allow-Origin", "*")
                return res
        else:
            return jsonify("Error")
    return 'Error'