Running Flask-Vue site with Gunicorn and Nginx - vue.js

Question

I have website that was created by a colleague that I’ve taken over. It’s been designed with Flask and Vue. I’ve been able to run this locally after some troubleshooting, but when trying to deploy this onto a server, I can’t get the site running.
I’ve followed numerous tutorials where I’ve used the following:
Gunicorn:
gunicorn --workers 1 --bind 0.0.0.0:5000 -m 777 wsgi:app
Config for nginx:
server {
listen 80;
server_name 192.168.1.1;
add_header Access-Control-Allow-Origin *;
# To allow POST on static pages
error_page 405 =200 $uri;
location / {
root frontend/dist;
try_files $uri $uri/ /index.html;
}
location /config {
include proxy_params;
proxy_pass http://0.0.0.0:5000;
}
}
Within my frontend App.vue, I link to the backend - which I've tried:
backend_url: 'http://127.0.0.1:5000'
backend_url: 'http://192.168.1.1:5000'
Then when I load up 192.168.1.1, the frontend starts initially, but when it comes to communicating with the backend via different flask #app.routes, it stops.
I’ve also tried using a socket to connect between gunicorn and nginx, but I get the same issue.
When looking on the console in Chrome, I get:
POST http://192.168.1.1:5000/config net::ERR_CONNECTION_TIMED_OUT 192.168.1.1/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Whereas in Firefox, I get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.1:5000/config. (Reason: CORS request did not succeed). Status code: (null)
This is why I added add_header Access-Control-Allow-Origin *; within my nginx config file
Any ideas?
CORS:
app = Flask(__name__)
app.config['CORS_HEADERS'] = 'Content-Type'
cors = CORS(app, resources={r"/*": {"origins": "*"}})

Answer 1

Looks like you need to enable CORS in flask for the domain and/or IP serving the Vue app.
See flask-cors extension How to enable CORS in flask