我正在尝试使用Vite应用程序(localhost:5173)从Flask服务器(localhost:5000)获取数据。我所有的API端点都在Postman中工作。我遵循了Vite文档中的说明,但是,我一定错过了一些东西,因为获取仍然向localhost:5173发送请求。
下面是vite.config.ts:
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://127.0.0.1:5000",
changeOrigin: true,
secure: false,
ws: true,
configure: (proxy, _options) => {
proxy.on('error', (err, _req, _res) => {
console.log('proxy error', err);
});
proxy.on('proxyReq', (proxyReq, req, _res) => {
console.log('Sending Request to the Target:', req.method, req.url);
});
proxy.on('proxyRes', (proxyRes, req, _res) => {
console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
});
}
},
}
}
})
下面是vite.config中错误处理的客户端控制台输出:
Sending Request to the Target: GET /api/home/
Received Response from the Target: 200 /api/home/
这是我的fetch:
fetch('/api/home')
.then((res) => console.log(res))
// .then((res) => res.json())
// .then((data: object[]) => {
// setPostData(data)
// })
这是上面console.log的输出(困惑为什么提取仍然命中localhost:5173端点):
type: 'basic',
url: 'http://localhost:5173/api/home/',
redirected: true,
status: 200, ok: true, …
这是一些数据,正如它在Postman中所回应的那样:
[{
"comments": [],
"created_at": "Thu, 23 Mar 2023 08:30:17 GMT",
"likes": 2,
"text": "Lorem ipsum",
"title": "Morbi non quam nec dui luctus rutrum",
"updated_at": "Thu, 23 Mar 2023 08:30:17 GMT",
"user": "alesmonde0",
"user_id": 1
}]
我是Flask的新手,TypeScript的新手,但是有使用Express和Node的React/Vite的经验。我错过了一些简单的东西吗?
我试过:
- 根据Vite上的文档
- 将vite.config中的server.proxy路径更改为'/' -这只服务于我的Flask应用程序,没有Vite
- 将
secure: false
添加到vite.config(我在类似问题上找到的一个解决方案)中,但没有成功 - 将
ws: true
添加到vite.config -我在这里找到的另一个解决方案-不起作用 - 将server.proxy url从“/API”更改为“/”-这为我的Flask应用程序提供了服务,我无法看到我的Vite前端
- 添加Access-Control-Allow-Origin头到我的fetch -这没有任何作用
- 添加server.proxy.configure选项以尝试查找错误-这令人困惑地返回200 -我希望是400
1条答案
按热度按时间xlpyo6sf1#
我能够通过使用Axios解决这个问题。这只需要配置Axios模块本身,而不是必须配置Vite.config文件。
取入React组分:
我还必须在服务器端实现flask-CORS,以避免'Access-Control-Allow-Origin'错误:
app.py: