AJAX Flask 请求 CORS 策略错误

Question

我正在使用 Flask 构建一个简单的后台。我正在尝试使用 AJAX 在客户端发出一些请求，但它总是抛出以下错误：

access to XMLHttpRequest at 'http://10.11.0.123/...' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经尝试了几种解决方案，但其中 none 行得通。我还通过以下方式使用来自 flask_cors 的 CORS 包：

    CORS(app, resources={r"/hardware/control/1": {"origins": "http://localhost:5000"}})
    app.run(host="0.0.0.0", port=5000, threaded=True)

但是，我认为这对 AJAX 请求没有影响，因为 Flask 应用程序在服务器端运行。这是我的 ajax 请求：

$.ajax({
            url: 'http://10.11.0.123/...',
            type: "GET",
            contentType: 'text/plain',
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            withCredentials: true,
            crossDomain: true,
            success: function (result) {
                console.log(result)
            },
        });

我知道目标服务器正在接收请求，但是我无法收到服务器的任何响应。

分析网络请求，来自 chrome 控制台，请求 returns 状态：失败，类型：xhr。

我在烧瓶中的终点是：

@system.route('/hardware/control/<int:device_id>')
def hardware_control(device_id):
    device = Device.query.get(device_id)
    return render_template('hardware_interaction/camera_preview.html',device=device)

我正在这样创建应用程序：

def create_app():
     app = Flask(__name__, instance_relative_config=False)
     app.config.from_object('config.DevelopmentConfig')
     CORS(app, resources={r"/hardware/control/*": {"origins": "*"}})
     with app.app_context():
        return app

app = create_app()

if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, threaded=True)

Answer 1

header Access-Control-Allow-Origin 必须从 Flask 返回，而不是 AJAX 请求的。所以它会是这样的：

def get_content():
    return "It works!", 200

@app.route('/')
def home():
    content, status_code = get_content()
    headers = {'Access-Control-Allow-Origin': '*'}
    return content, status_code, headers

Answer 2

您可以使用它来测试它实际上是一个 CORS 问题。这对我有用。

@app.after_request
def after_request(response):
    header = response.headers
    header['Access-Control-Allow-Origin'] = '*'
    header['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'
    header['Access-Control-Allow-Methods'] = 'OPTIONS, HEAD, GET, POST, DELETE, PUT'
    return response

Answer 3

谢谢大家的帮助。我已经解决了这个问题。我正在向 HTTP PTZ Camera 发出请求，但不允许我从客户端发出请求（我不知道为什么）。所以我解决了这个问题，现在我向我的服务器发出请求，我的服务器向相机发出请求。这就是我正在做的事情：

$.ajax({url: 'http://127.0.0.1:5000/teste00',
        type: "GET",
        success: function (result) {},
        });

在服务器端：

@system.route('/teste00')
def teste():
    response = requests.get('camera_url')
   return response.content

AJAX Flask 请求 CORS 策略错误

AJAX Request CORS Policy error with Flask

javascript

python

ajax

flask

flask-cors