Why React can't reach Flask endpoints in production?

Question

I've got a React app with Flask on the backend in production and I found out that none of my endpoints are reached from React.

I'm aware that when using client-side routing developer needs to use a catch-all function similar to the below:

@app.errorhandler(404)
def error_handler(e):
    return render_template('index.html')

I'm using Flask-CORS to handle cross origin requests:

within config.py:

class ProductionConfig:
    CORS_HEADERS = 'Content-Type'
    ...
    ...

my blueprint:

CORS(auth_blueprint, resources={r'/*': {"origins": "https://example.com", "allow_headers": "*", "expose_headers": "*"}})

@auth_blueprint.route('/auth/login', methods=['POST'])
@cross_origin()
def login():
    ...
    ...

on the frondend I'm defining headers like this:

const headers = { "Access-Control-Allow-Origin": "*" };
const url = "https://example.com:5000/auth/login";
axios.post(url, data, headers).then(resp => { ... })

And I'm not getting any errors whatsoever. Server's logs are clean and the console only shows Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com:5000/auth/login. (Reason: CORS request did not succeed). "Reason: CORS request did not succeed" means that the server didn't return anything. The app renders fine however React (axios) can't reach my endpoints. Are there any gotchas I'm not aware of ? When request is sent I'm not even getting a status code in the network tab.

Thank you.

Screenshot of the network tab:

score -3 · Answer 1 · edited Mar 10 '21 at 18:37

-3

You need to change the connection protocol to http.

edited Mar 10 '21 at 18:37

Bhargav Rao

50,140
28
121
140

answered Mar 10 '21 at 14:46

Evgeniy

303
2
9

That shouldn't matter. Besides https is a standard. – appdeveloper Mar 10 '21 at 14:51
No, it have matter. Specially if you working on your local PC and, of course does not have certificate. https://stackoverflow.com/questions/19541547/does-cross-origin-resource-sharingcors-differentiate-between-http-and-https/19542686#19542686 – Evgeniy Mar 10 '21 at 15:00
Sorry you're right in that case. My production server uses encryption. – appdeveloper Mar 10 '21 at 15:08
Can you provide screenshot of your network tab of browser dev. toolkit? – Evgeniy Mar 10 '21 at 15:11
Screenshot added. – appdeveloper Mar 10 '21 at 15:21
From the looks of it only POST requests are troubling. – appdeveloper Mar 10 '21 at 15:26

Why React can't reach Flask endpoints in production?

1 Answers1