Flask应用中CORS斜杠差异问题解析与@cross_origin()解决方案

# app/__init__.py
from flask import Flask
from flask_cors import CORS

def create_app():
    app = Flask(__name__)
    # ... 其他应用配置 ...

    # 全局启用CORS
    CORS(app)

    # 注册蓝图
    from .products import bp_products
    app.register_blueprint(bp_products)

    return app

# app/products/__init__.py
from flask import Blueprint, request, abort
# 假设 json_response 和 product_schema 已定义

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')
# @json_response 假设这是一个自定义装饰器
def add_product():
    if request.json is None:
        abort(400, 'Request must be json')
    # ... 业务逻辑处理 ...
    # return product_schema.dump(product)
    return {"message": "Product added successfully"} # 简化示例

// 前端代码示例
const apiUrl = 'http://localhost:5000'; // 假设Flask服务运行在此

// 1. 请求带有尾随斜杠的路由 - 正常工作
let responseWithSlash = await fetch(`${apiUrl}/products/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        asin: 'B07XXXXXXX',
        process: 1,
      }),
    });
console.log('With slash:', await responseWithSlash.json());

// 2. 请求不带尾随斜杠的路由 - 出现CORS错误
let responseNoSlash = await fetch(`${apiUrl}/products`, { // 注意：这里没有尾随斜杠
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        asin: 'B07YYYYYYY',
        process: 1,
      }),
    });
console.log('No slash:', await responseNoSlash.json());

# app/products/__init__.py
from flask import Blueprint, request, abort
from flask_cors import cross_origin # 导入 cross_origin 装饰器
# 假设 json_response 和 product_schema 已定义

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

@bp_products.route('', methods=['POST', 'OPTIONS'], endpoint='add_no_slash')
@cross_origin() # 关键：为不带斜杠的路由添加此装饰器
# @json_response
def add_product_no_slash():
    if request.json is None:
        abort(400, 'Request must be json')
    # ... 业务逻辑处理 ...
    return {"message": "Product added successfully (no slash)"}

@bp_products.route('/', methods=['POST', 'OPTIONS'], endpoint='add_with_slash')
@cross_origin() # 推荐：为带斜杠的路由也添加，保持一致性
# @json_response
def add_product_with_slash():
    if request.json is None:
        abort(400, 'Request must be json')
    # ... 业务逻辑处理 ...
    return {"message": "Product added successfully (with slash)"}