無法做出反應，無法與對方交談

Question

我在同一台計算機上運行兩個服務：

1. 由Nginx直接提供服務的React前端

2. 在本地主機上運行的Flask服務器（端口5000）。

就像您想象的那樣，react應用程序使用fetch來調用flask服務器進行繁重的工作。 但是，我似乎無法拿到終點。

我將燒瓶內塞包裝在CORS(app)以消除此問題。 我還嘗試了多種方式來fetch端點（http，https，localhost），但無濟於事。 到底他媽發生了什么？ 就目前而言，我在請求后得到了net::ERR_CONNECTION_RESET （但是我看不到端點沒有被命中）。 現在，這是我的代碼的關鍵部分：

燒瓶：

app = Flask(__name__)
CORS(app)
@app.route('/api/get_dashboard_art', methods=["GET", "POST"])
def hello():
    return jsonify({'data': 'stuff'})

反應/獲取：

fetch('http://localhost:5000/api/get_dashboard_art')
    .then(function (response_json) {
        return response_json.json()
    })

還要注意的另一件事是，我可以執行curl localhost:5000/api/*並接收我需要的所有信息。 因此，我知道該服務正在運行。

我已經看到有類似問題的人of不休，但我確實沒有找到任何解決方法。 請幫忙！

Answer 1

在您的反應代碼中，

fetch('http://localhost:5000/api/get_dashboard_art')

您所呼叫的端點（/ API / get_dashboard_art）NOT（/）就像你在你的應用程序燒瓶。

@app.route('/', methods=["GET", "POST"])

將端點更改為

@app.route('/api/get_dashboard_art', methods=["GET", "POST"])

它應該工作。

Answer 2

好的... @diypcjourney發布的鏈接讓我思考了幾件事。 我最終要做的是在我的react nginx配置中放置一個代理。 它接收了來自FE的所有呼叫，並將其定向到flask應用程序。 這是它的樣子（再次，這是react nginx配置，而不是燒瓶）

server {
  listen 80;

  server_name localhost;  # or whatever your IP/site is

  root /var/www/reactapp/build/;

  index index.html index.htm;

  location / {
    try_files $uri /index.html;
  }

  location /api/ {
    proxy_pass http://localhost:5000/api/;
  }
}

這是nginx文檔： https : //www.nginx.com/resources/admin-guide/reverse-proxy/

我不確定這是否可以解決問題，但這似乎是一個不錯的解決方案。 我希望有人能更好地解釋為什么這樣做。