0

我正在使用 Flask 和 React 开发一个 Web 应用程序，尽管使用 Flask-CORS 并且所有默认值都未更改（允许所有标头和来源）从 React 发出的请求被拒绝Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/auth/check_passport. (Reason: CORS request did not succeed).

烧瓶：

from flask_cors import CORS

def create_app(script_info=None):
    app = Flask(__name__)
    app.config.from_object(current_config)
    from project.api.auth import auth_blueprint
    app.register_blueprint(auth_blueprint)

    CORS(app)

    return app

在终端中，我可以看到它可以进入 Flask：127.0.0.1 - - [20/Apr/2021 10:36:59] "POST /auth/check_passport HTTP/1.1" 200

根据将 CORS 保留为默认值的文档，任何客户端都可以到达端点。

非常感谢任何反馈。

编辑：

验证码：

from flask import Blueprint, request

auth_blueprint = Blueprint('auth', __name__, url_prefix='/auth')

@auth_blueprint.route('/check_passport', methods=['POST'])
def check_passport():
    print('called')  # isn't being printed out
    image_received = request.data['image']
    ...
    ...

前端：

const checkPassport = () => {
    if (passportFile) {
      const fd = new FormData();
      fd.append("image", passportFile, passportFile.name);
      const url = "http://localhost:5000/auth/check_passport";
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(url, fd, config)
        .then(resp => {
          console.log(resp.data.message);
          console.log(resp.data.content);
        })
        .catch(e => {
          console.log(e);
        });
    }
  };
4

1 回答 1

0

起初我认为这可能与您使用蓝图有关，但不，我无法重现该问题。这是我的设置：

from flask_cors import CORS
from flask import Flask, Blueprint, jsonify

auth = Blueprint('auth', __name__)

@auth.route('/check_passport')
def check_passport():
    return jsonify(dict(message='Check passport'))

app = Flask(__name__)
app.register_blueprint(auth, url_prefix='/auth')
CORS(app). # comment out to see cors error

我用这个向端点发出请求的简单页面对其进行测试：（只需将其拖入浏览器窗口并观察控制台）

<!DOCTYPE html>
<html>
    <head>
        <title>Cors Check</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script type='text/javascript'>
            var url = 'http://127.0.0.1:5000/auth/check_passport';

            // fetch
            fetch(url).then(resp => resp.json()).then(data => {
                console.log('SUCCESS')
                console.log(data)
            })
            
            // or axios
            axios.get(url).then(response => {
                console.log('SUCCESS', response.data);
            })
        </script>
    </head>

<body></body>
</html>

我可以看到它工作正常，CORS(app)但没有它就不行。

于 2021-04-20T10:47:40.870 回答