I have a Flask app that's split into front-end SPA (Vue.js) and back-end. But I'm having trouble with CORS.
In the front-end, I'm making API calls to //127.0.0.1:5000
, which is what the back-end is listening to:
axios.put(
'//127.0.0.1:5000/api/foo',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
})
On the back-end, I set up CORS by using Flask-CORS just like everybody mentions. I'm also using Blueprints (if that makes any difference), and my router looks like this:
from flask_cors import CORS
api = Blueprint('api', __name__)
CORS(api)
@api.route('/api/foo', methods=['PUT'])
def foo():
# etc...
In Firefox, I get an OPTIONS
preflight request, then a console error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://127.0.0.1:5000/api/foo. (Reason: CORS request did not succeed). Status code: (null).
And on Chrome, I get this error:
PUT https://127.0.0.1:5000/api/foo net::ERR_CONNECTION_REFUSED
On my local machine, I have no problems. The issue happens on the instance I've deployed to Digitalocean. It has HTTPS enabled, so that shouldn't be an issue (I think). Any ideas? Do I need to change the call to localhost to something else? I feel like I've tried all the relevant suggestions regarding CORS.