Ajax call to Flask backend resulting in 502 Bad Request error - ajax

Question

I am currently building my first full-stack application with Vue.js and Python Flask. When I run the frontend and backend separately, I am able to successfully make $.ajax POST requests to my Flask app. However, I am now moving to deploy and am opting to use Dockerfile and nginx. The app works just fine, except when I make the same $.ajax POST I get the error in the console:
POST http://localhost:8007/postimage 502 (Bad Gateway)
Here is the $.ajax call:
const path = '/postimage'
$.ajax({
url: path,
type: 'POST',
data: imageData,
cache: false,
contentType: false,
processData: false
})
.done(function (data) { alert(data + 'success') })
.fail(function (errorMsg) { alert(errorMsg + 'error') })
And here is my nginx default.conf file:
server {
listen $PORT;
root /usr/share/nginx/html;
index index.html index.html;
location / {
try_files $uri /index.html =404;
}
location /ping {
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
location /postimage {
proxy_pass http://0.0.0.0:5000;
proxy_http_version 1.1;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
NOTE: For the proxy_pass I have tried http://127.0.0.1:5000, http://0.0.0.0:5000, as well as http://localhost:5000 but they all give the same error message.