reactjs - 使用 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

如果我像这样从 React 调用这个端点，一切正常:

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 错误:从来源 'http://localhost:3000' 访问 'http://localhost:8080/home' 已被 CORS 策略阻止:否请求的资源上存在“Access-Control-Allow-Origin” header 。

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

谢谢，

Answer 1

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

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

另见 Flask Documentation