Flask“http://localhost:3000”已被 CORS 策略阻止：无“Access-Control-Allow-Origin”

Question

我正在尝试配置烧瓶后端以对前端做出反应。这两个端口都在不同的端口上运行，因此我导入 CORS 以允许配置后端以与位于不同端口上的应用程序一起使用（后端在 5000 上运行，前端在 3000 上运行）。

这是我的有效设置：

主.py

app=Flask(__name__)
...
CORS(app)

应用程序.js

  useEffect(
    ()=>{
      fetch('http://127.0.0.1:5000/recipe/hello')
      .then((response=>{console.log(response); return response.json()}))
      .then(data=>console.log(data))
      .catch(err=>console.log(err))
    },[]
  )

包.json

"proxy": "http://localhost:5000",

奇怪的是，前端必须在 package.json 中设置

proxy

，然后 fetch 命令必须具有带有

http://127.0.0.1:5000

的完整代理路径（它不适用于

http://localhost:5000

）

有人可以解释一下这是怎么回事吗？为什么它必须以这种奇怪的方式配置才能工作以及我该如何修复它？

有关更多背景信息：我正在关注本教程 https://www.youtube.com/watch?v=Zr5jtRhUVJA。

Answer 1

假设您在项目中使用 Create React App，则使用 代理设置 来避免开发过程中的跨域资源共享 (CORS) 问题。

此代理将 React 应用程序发出的 API 请求转发到另一台服务器，通常在不同的端口或域上运行。这有助于绕过浏览器的同源策略，确保您的应用程序可以在开发过程中毫无问题地从外部源获取数据。此设置仅用于开发，不用于生产。