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

Question

我目前正在使用 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.

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

谢谢，

Answer 1

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

因此，当您的应用程序访问/homeFlask 时，会返回一个重定向/home/，但没有 CORS 标头。这会导致您看到的错误。

另请参阅Flask 文档