Flask CORS 问题：“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

Question

我正在开发一个 Web 应用程序，其中前端是使用 React 构建的（在 http://localhost:3000 上运行），后端是使用 Flask 构建的（在 http://localhost:5000 上运行）。我尝试在 Flask 后端启用 CORS 以允许跨域请求，但从前端发出请求时不断遇到以下错误：

Access to XMLHttpRequest at 'http://localhost:5000/test' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经在后端安装并配置了Flask-CORS，并尝试了多种配置，但问题仍然存在。这是我的设置的详细说明。

初始化.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bcrypt import Bcrypt
from flask_cors import CORS

db = SQLAlchemy()
bcrypt = Bcrypt()

def create_app():
    app = Flask(__name__)
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
    app.secret_key = 'supersecretkey'

    db.init_app(app)
    bcrypt.init_app(app)

    # Enable CORS for all routes and allow requests from localhost:3000
    CORS(app, resources={r"/*": {"origins": "http://localhost:3000"}}, supports_credentials=True)

    # Ensure CORS headers are present in all responses
    @app.after_request
    def after_request(response):
        response.headers.add('Access-Control-Allow-Origin', 'http://localhost:3000')
        response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
        response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
        return response

    from .routes import main
    app.register_blueprint(main)

    return app

路线.py

from flask import Blueprint, request, jsonify
from .models import User
from . import db

main = Blueprint('main', __name__)

@main.route('/signup', methods=['POST'])
def signup():
    data = request.get_json()
    username = data['username']
    email = data['email']
    password = data['password']

    user = User.query.filter_by(email=email).first()

    if user:
        return jsonify({'message': 'User already exists'}), 400

    new_user = User(username=username, email=email)
    new_user.set_password(password)
    db.session.add(new_user)
    db.session.commit()

    return jsonify({'message': 'User created successfully'}), 201


@main.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    email = data['email']
    password = data['password']

    user = User.query.filter_by(email=email).first()

    if user and user.check_password(password):
        return jsonify({'message': 'Login successful'}), 200

    return jsonify({'message': 'Invalid credentials'}), 401


# make default home page
@main.route('/')
def index():
    return jsonify({'message': 'Backend Running'})


@main.route('/test', methods=['GET'])
def test_route():
    return {"message": "CORS is working!"}

React 前端（signup.js）

import React, { useEffect } from 'react';
import axios from 'axios';

const Signup = () => {

  // Test the backend /test route
  useEffect(() => {
    axios.get('http://localhost:5000/test')
      .then(response => console.log(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h2>Signup Page</h2>
    </div>
  );
};

export default Signup;

我尝试过的： 安装的 Flask-CORS：

验证 Flask-CORS 是否已安装并配置如上所示。 CORS 设置是在 create_app 函数中注册路由之前进行的。 检查浏览器的网络选项卡：

OPTIONS 请求显示不存在 Access-Control-Allow-Origin 标头。 这会导致 POST/GET 请求因 CORS 而失败。 清除缓存并在隐身模式下尝试：

我还尝试禁用浏览器缓存并在隐身模式下测试应用程序，但问题仍然存在。

预期行为： Flask 后端应返回必要的 CORS 标头，包括 Access-Control-Allow-Origin: http://localhost:3000，允许 React 前端在没有 CORS 问题的情况下发出请求。

实际行为： 从源“http://localhost:3000”访问“http://localhost:5000/test”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头.

问题： 为了正确启用 CORS，我的 Flask 配置中缺少什么？尽管使用了 Flask-CORS，为什么 Access-Control-Allow-Origin 标头没有添加到响应中？任何帮助或指示将不胜感激！

Answer 1

为什么添加此部分？

# Ensure CORS headers are present in all responses
@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', 'http://localhost:3000')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
    return response

我个人在使用flask-cors时从来没有需要过它。

他们的 pypi 页面似乎也不建议您需要它。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

另外，请确保您的

create_app()

实际上被称为 like

app = create_app()

if __name__ == '__main__':
    app.run(debug=True)

而且它还没有静止

app = Flask(__name__)

最后，您可以尝试确保是否删除 CORS 或允许所有来源

CORS(app, resources={r"/api/*": {"origins": "*"}})

到端点的卷曲是否按您的预期工作。

curl 127.0.0.1:5000/test