I don't see an error in your vite proxy config, but it might be in your back-end server. At first, my API endpoint was configured as /data
, but this didn't work, as the proxy request was being sent to /api/data
using my proxy config (further down). Perhaps there's something in your server configuration.
I noticed in your fix, you said that you made the axios
request:
const res = await axios.get('http://127.0.0.1:5000/', {
headers: { 'Content-Type': 'application/json' }
});
Earlier, you had noted your app was trying to request http://localhost:5173/api/home/
, which would be proxied as http://127.0.0.1:5000/api/home/
, thus this isn't the same as the axios.get
url above. Also keep in mind how your server might treat the final /
.
To your question about the API requests you expect to proxy going to the vite server at localhost:5173
, that is normal, and what I see as well in my working project. The network request is made to the vite server, then it transparently sends that request to the proxy server (no client notification), and transparently returns the API result from the vite server itself.
I just set up a vite React-TS + Flask project using the vite server.proxy
setting. I initialized the project using create vite and the react-ts
template. I then created a directory api
inside the project and copied my flask server.py
into it. The Flask server is very basic, 28 lines in total, and runs on the default URL of http://127.0.0.1:5000
.
If I can provide any additional code, please let me know.
Full vite.config.ts
:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:5000',
changeOrigin: true,
secure: false,
ws: true,
},
},
},
})
@app.route
from ./api/server.py
@app.route('/api/data')
def det_data():
# Return a data object to the front end
return {
"name":"James Baldwin",
"occupation":"author",
"date":x,
}
fetch()
in App.tsx
:
useEffect(() => {
// This will redirect to the Flask server (http://127.0.0.1:5000/api/data)
fetch("/api/data").then((result) =>
result.json().then((data) => {
setdata(data);
})
);
}, []);
Good luck!