使用 React 和 Flask API 带有尾随斜杠的 CORS 奇怪行为

问题描述

我目前正在使用 React 和 Flask API 构建应用程序，但遇到了一些我不明白的 CORS 错误：

我有一个这样的端点：

@app.route('/home/',methods=['GET'])
def home():
    response = Response(
        json.dumps(
            get_data()
        ),mimetype='application/json'
    )
    response.headers.add("Access-Control-Allow-Origin","*")
    return response

如果我像这样从反应中调用此端点，则一切正常：

fetch('http://localhost:8080/home/')
            .then(res => res.json())
            .then((data) => {
                setData(data)
            })
            .catch(console.log)

但是，如果我在 Flask API 中将路由设置为 '/home'（没有尾部斜杠）并使用 fetch('http://localhost:8080/home)' 调用它，我会收到一个 CORS 错误：Access to fetch at 'http://localhost:8080/home' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

虽然这对我的项目来说不是什么大问题，但我想了解这个尾部斜杠的变化......

谢谢，

解决方法

/home 和 /home/ 是到flask 的不同路由，但对于带有尾部斜杠的路由，它会在访问带有尾部斜杠的路由时自动进行重定向。

因此，当您的应用访问 /home 时，flask 会返回到 /home/ 的重定向，但没有 CORS-Header。这会导致您看到的错误。

另见Flask Documentation