Why using the most permissive setting won't allow request to get through?

Question

Why using the most permissive setting won't allow request to get through?

54 Views Asked by Mark At 04 April 2025 at 22:06

I'm developing a web app with Flask & React and despite using Flask-CORS with all the defaults unchanged (allowing for all headers and origins) requests made from React gets rejected with Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/auth/check_passport. (Reason: CORS request did not succeed).

Flask:

from flask_cors import CORS

def create_app(script_info=None):
    app = Flask(__name__)
    app.config.from_object(current_config)
    from project.api.auth import auth_blueprint
    app.register_blueprint(auth_blueprint)

    CORS(app)

    return app

In terminal I can see it makes it to Flask though: 127.0.0.1 - - [20/Apr/2021 10:36:59] "POST /auth/check_passport HTTP/1.1" 200

According to docs leaving CORS in its defaults allows for any client to reach the endpoint.

Any feedback is much appreciated.

edit:

auth.py:

from flask import Blueprint, request

auth_blueprint = Blueprint('auth', __name__, url_prefix='/auth')

@auth_blueprint.route('/check_passport', methods=['POST'])
def check_passport():
    print('called')  # isn't being printed out
    image_received = request.data['image']
    ...
    ...

front-end:

const checkPassport = () => {
    if (passportFile) {
      const fd = new FormData();
      fd.append("image", passportFile, passportFile.name);
      const url = "http://localhost:5000/auth/check_passport";
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(url, fd, config)
        .then(resp => {
          console.log(resp.data.message);
          console.log(resp.data.content);
        })
        .catch(e => {
          console.log(e);
        });
    }
  };

Original Q&A

There are 1 best solutions below

**dmitrybelyakov** · Answer 1

At first I thought it might have something to do with you using blueprints, but no, I can't reproduce the problem. Here's my setup:

from flask_cors import CORS
from flask import Flask, Blueprint, jsonify

auth = Blueprint('auth', __name__)

@auth.route('/check_passport')
def check_passport():
    return jsonify(dict(message='Check passport'))

app = Flask(__name__)
app.register_blueprint(auth, url_prefix='/auth')
CORS(app). # comment out to see cors error

I test it with this simple page making a request to the endpoint: (just drag it into a browser window and watch the console)

<!DOCTYPE html>
<html>
    <head>
        <title>Cors Check</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script type='text/javascript'>
            var url = 'http://127.0.0.1:5000/auth/check_passport';

            // fetch
            fetch(url).then(resp => resp.json()).then(data => {
                console.log('SUCCESS')
                console.log(data)
            })
            
            // or axios
            axios.get(url).then(response => {
                console.log('SUCCESS', response.data);
            })
        </script>
    </head>

<body></body>
</html>

I can see it working fine with CORS(app) but then without it doesn't.

Why using the most permissive setting won't allow request to get through?

There are 1 best solutions below

Related Questions in PYTHON-3.X

Related Questions in FLASK

Related Questions in FLASK-CORS

Trending Questions

Popular # Hahtags

Popular Questions