Flask POST请求CORS跨域问题深度解析：兼谈URL斜杠处理

# app/products/__init__.py
from flask import Blueprint, request, abort
from flask_cors import CORS, cross_origin # 导入cross_origin

bp_products = Blueprint('products', __name__, url_prefix='/products')

# 路由定义，同时支持带斜杠和不带斜杠
@bp_products.route('', methods=['POST', 'OPTIONS'], endpoint='add')
@bp_products.route('/', methods=['POST', 'OPTIONS'], endpoint='add')
# @json_response # 假设这是一个自定义的响应装饰器
def add():
    if request.json is None:
        abort(400, 'Request must be json')

    # 业务逻辑处理，例如保存产品
    product = {"asin": request.json.get("asin"), "process": request.json.get("process")}
    # return product_schema.dump(product) # 假设返回序列化后的产品
    return product, 201

// 前端代码
const apiUrl = 'http://localhost:5000'; // 假设API地址
const productAsin = 'B07XXXXXXX';

// 带有尾部斜杠的请求URL
let responseWithSlash = await fetch(`${apiUrl}/products/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        asin: productAsin,
        process: 1,
      }),
    });
// 假设此请求正常工作

// 不带尾部斜杠的请求URL
let responseWithoutSlash = await fetch(`${apiUrl}/products`, { // 注意：这里没有尾部斜杠
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        asin: productAsin,
        process: 1,
      }),
    });
// 假设此请求触发CORS错误

# app/products/__init__.py (修正后的代码)
from flask import Blueprint, request, abort
from flask_cors import cross_origin # 导入cross_origin

bp_products = Blueprint('products', __name__, url_prefix='/products')

@bp_products.route('', methods=['POST', 'OPTIONS'], endpoint='add')
@bp_products.route('/', methods=['POST', 'OPTIONS'], endpoint='add')
@cross_origin() # 添加此装饰器
# @json_response
def add():
    if request.json is None:
        abort(400, 'Request must be json')

    # 业务逻辑
    product = {"asin": request.json.get("asin"), "process": request.json.get("process")}
    return product, 201

from flask import Flask
from flask_cors import CORS

def create_app():
    app = Flask(__name__)

    # 全局CORS配置，允许所有来源访问
    # 在生产环境中，建议限制origins为特定域名
    CORS(app) 

    with app.app_context():
        # 导入并注册蓝图
        from .products import bp_products
        app.register_blueprint(bp_products)

    return app

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

from flask import Blueprint, request, abort, jsonify
from flask_cors import cross_origin

bp_products = Blueprint('products', __name__, url_prefix='/products')

@bp_products.route('', methods=['POST', 'OPTIONS'], endpoint='add_no_slash')
@bp_products.route('/', methods=['POST', 'OPTIONS'], endpoint='add_with_slash')
@cross_origin() # 确保此路由的CORS处理
def add():
    if request.method == 'OPTIONS':
        # 预检请求由@cross_origin()自动处理，但如果需要自定义，可以在这里添加逻辑
        return '', 200

    if request.json is None:
        abort(400, 'Request must be JSON')

    # 模拟业务逻辑
    data = request.json
    asin = data.get("asin")
    process = data.get("process")

    if not asin or not process:
        abort(400, 'Missing asin or process in request body')

    product = {"id": "some_generated_id", "asin": asin, "process": process, "status": "created"}
    return jsonify(product), 201

@bp_products.route('/<product_id>', methods=['GET', 'OPTIONS'])
@cross_origin()
def get_product(product_id):
    if request.method == 'OPTIONS':
        return '', 200
    # 模拟获取产品逻辑
    return jsonify({"id": product_id, "asin": "B0XXXXXX", "process": 1, "status": "active"})

async function addProduct(asin: string, process: number) {
  const apiUrl = 'http://localhost:5000'; // Flask应用运行的地址

  try {
    // 尝试不带斜杠的URL
    let response = await fetch(`${apiUrl}/products`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        asin: asin,
        process: process,
      }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.message || response.statusText}`);
    }

    const data = await response.json();
    console.log('Product added successfully (no slash):', data);
    return data;

  } catch (error) {
    console.error('Error adding product (no slash):', error);
    // 也可以尝试带斜杠的URL作为备用，或者统一使用带斜杠的URL
    try {
        let responseWithSlash = await fetch(`${apiUrl}/products/`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              asin: asin,
              process: process,
            }),
          });
          if (!responseWithSlash.ok) {
            const errorData = await responseWithSlash.json();
            throw new Error(`HTTP error! status: ${responseWithSlash.status}, message: ${errorData.message || responseWithSlash.statusText}`);
          }
          const dataWithSlash = await responseWithSlash.json();
          console.log('Product added successfully (with slash):', dataWithSlash);
          return dataWithSlash;
    } catch (slashError) {
        console.error('Error adding product (with slash):', slashError);
        throw slashError;
    }
  }
}

// 调用函数
addProduct('B09XXXXXXX', 1);