I'm running react.js for frontend and Flask for my backend. On development, everything worked fine.
When I built the react.js app and hosted it locally with nginx, the following error appeared whenever I tried to contact my API:
Failed to load resource: the server responded with a status of 405 (Not Allowed)
This is what I get when I expand the error message on the console:
(anonymous) @ xhr.js:177
e.exports @ xhr.js:13
e.exports @ dispatchRequest.js:50
Promise.then (async)
u.request @ Axios.js:61
r.forEach.u.<computed> @ Axios.js:87
(anonymous) @ bind.js:9
k @ sendFiles.js:13
(anonymous) @ fileDownloadMain.js:31
value @ fileDownloadMain.js:28
hl @ react-dom.production.min.js:219
Tu @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Ha @ react-dom.production.min.js:122
Mu @ react-dom.production.min.js:252
vu @ react-dom.production.min.js:243
fu @ react-dom.production.min.js:237
Xu @ react-dom.production.min.js:285
(anonymous) @ react-dom.production.min.js:289
yu @ react-dom.production.min.js:244
rs @ react-dom.production.min.js:289
t.render @ react-dom.production.min.js:296
97 @ index.js:5
l @ downloads:1
r @ downloads:1
t @ downloads:1
(anonymous) @ main.b7ed8fe0.chunk.js:1
My nginx configuration file:
server {
listen 80;
root "/var/www/htmlTranslate";
index index.html;
location / {
try_files $uri /index.html;
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
}
Running backend with gunicorn (server name is main.py)
gunicorn -b 127.0.0.1:5000 main:app
Simplified version of my Flask file:
from flask import Flask
from flask_cors import cross_origin
app = Flask(__name__)
@app.route("/api/convert_file", methods=["GET", "POST"])
@cross_origin()
def foo():
if request.method == "POST":
return "Post request"
else:
return "Get request"