Question

我已经搜索了几个小时试图找到解决我的问题的好方法，但我似乎找不到解决方案。基本上，我使用蓝图将 Flask API 分解为两个单独的文件，一个用作 Flask 主应用程序，另一个用于处理所有身份验证路由。我遇到了 CORS 问题......在我将它们分开之前，它与 flask-cors 库一起工作得很好。但是，当我使用蓝图将其分解为单独的文件时，它不起作用。我做了大量研究，似乎有几种方法可以做到，但最好的方法似乎是在服务器端解决问题（至少在理论上，因为我还没有找到解决方案）。< /p>

app.py

    # Third-party libraries
    from flask import Flask
    from flask_cors import CORS
    
    # Internal imports
    from login import login_page

    # Flask app setup
    app = Flask(__name__)
    
    app.register_blueprint(login_page)
    CORS(app)
    app.config['CORS_HEADERS'] = 'Content-Type'
    if __name__ == "__main__":
          app.run(host="localhost", debug=True)

登录.py

# Third-party libraries
from flask import Flask, redirect, request, url_for, Blueprint, render_template, abort
from flask_login import (
    LoginManager,
    current_user,
    login_required,
    login_user,
    logout_user
)
from oauthlib.oauth2 import WebApplicationClient
import requests
from flask_cors import CORS

login_page = Blueprint('login_page', __name__)
CORS(login_page)

# Login route
@login_page.route('/login', methods=['GET'])
def login():
    # Find out what URL to hit for Google login
    google_provider_config = get_google_provider_config()
    authorization_endpoint = google_provider_config["authorization_endpoint"]
    # Use library to construct the request for Google login and provide
    # scopes that let you retrieve user's profile from Google
    request_uri = client.prepare_request_uri(
        authorization_endpoint,
        redirect_uri = request.base_url + "/callback",
        scope = ["openid", "email", "profile"]
    )
    return redirect(request_uri)

来自文档： https://flask-cors.readthedocs.io/en/latest/api.html#using-cors-with-blueprints

这似乎是我在做什么......但它不起作用。

编辑： 反应代码：

authenticate = async () => {
    console.log('authenticate called')
    const response = await users.get('/login');
}

我添加了一个测试路线，以查看我处理蓝图的方式是否与 flask-cors 库不正确，如下所示：

@login_page.route('/test')
def test():
    print('test')
    return 'test'

果然，我能够在控制台上看到打印的文本。所以这让我相信是其他原因阻止我访问 Google 的身份验证服务器。

Flask 应用程序在 localhost:5000 上运行，React 应用程序在 localhost:3000 上运行。传入 redirect 中的 login 方法的字符串如下：

https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=None&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Flogin%2Fcallback&scope=openid+email+profile

然而，在使用 React 之前，这是有效的。

Chrome 控制台错误：

从源 'http://localhost:3000' 访问 XMLHttpRequest at '...'（从 'http://localhost:3000/login' 重定向）已被 CORS 策略阻止：无“访问控制” -Allow-Origin' 标头存在于请求的资源上。

我还在我的 package.json 文件中添加了一个代理，如下所示：

  "proxy": "http://localhost:5000"

我来自：https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project/page/3

更新：

我决定采用使用 Nginx 解决这个问题的方法，因为似乎flask-cors 库不适合这个问题，因为似乎没有解决方案。

Nginx.conf

    user www-data;
    worker_processes 1;
    pid /run/nginx.pid;
    include /etc/nginx/modules-enabled/*.conf;
    
    events {
        worker_connections 1024;
    }
    
http {  

    upstream react-client {
        server react-client;
    }

    upstream flask-backend {
        server flask-backend;
    }

    server {
        listen 80;
        server_name localhost;

        location / {
            # From docker-compose, react-client port 80 is exposed
            proxy_pass          http://react-client;
        }

        # location /login/callback

        # location /logout
    }

    server {
        listen 3000;
        server_name localhost;

        location /login {
            proxy_pass          http://flask-backend;
        }
    }
}

docker-compose.yml:

version: '3'

services:

  reverse-proxy:
    image: nginx:1.17.10
    container_name: reverse-proxy
    depends_on: 
      - flask-backend
      - react-client
    volumes:
      - ./reverse-proxy/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
  
  react-client:
    image: react-client
    container_name: react-client
    build:
      context: ./client
    depends_on: 
      - flask-backend
    ports:
      - 3000:3000
    restart: on-failure
  
  flask-backend:
    image: flask-backend
    container_name: flask-backend
    build:
      context: ./api
    ports:
      - 5000:5000
    restart: on-failure

使用 Nginx 配置和 Docker 文件，我可以转到 http://localhost:80，它将我转发到 React 客户端。这一次，我没有收到 CORS 错误，但我在检查器中收到了这条消息，Failed to load resource: The network connection was lost.

我的理解是这样的：

http://localhost:80 -> http://localhost:3000，然后当按下按钮时，提示新路线

http://localhost:3000/login -> http://localhost:5000/login

我有两个服务器块，因为 Web 应用程序在端口 3000 和 Nginx 服务器在端口 80 上运行。

Answer 1

尝试CORS(login_page)而不是CORS(login_page, resources=r'/login')

编辑：解释为什么这可能有效。

您收到的错误表明 /login 路由没有允许 CORS。您正在正确地实例化 Flask-CORS，所以我怀疑如果您尝试描绘您希望 CORS 应用于您的特定路线，您将解决该问题。

文档使 CORS(login_page) 看起来应该自动打开到 CORS 的所有路由，但因为这不起作用，尝试上述答案可能会提供更好的结果。

使用 Flask 遇到 CORS 问题

1 个答案: