79549122

Date: 2025-04-01 20:28:36
Score: 2
Natty:
Report link

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!

Reasons:
  • RegEx Blacklisted phrase (2.5): please let me know
  • RegEx Blacklisted phrase (1): I can provide any additional code, please
  • Long answer (-1):
  • Has code block (-0.5):
Posted by: liquidki