I'm running a test to have my React client (built with vite) and Flask server speak to each other (linux, ubuntu VM) - I'm pretty sure I set up my proxy correctly but I'm running into this error message when hitting npm run dev to start my build:
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
Here is my code:
Package.json
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"proxy": "http://127.0.0.1:5000",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
Client app.jsx (which is then loaded via main.jsx):
import React, {useState, useEffect} from 'react'
function App() {
const [data, setData] = useState([{}])
useEffect(() => {
fetch("/members").then(
res => res.json()
).then(
data => {
setData(data)
console.log(data)
}
)
}, [])
return (
<div>App</div>
)
}
export default App
Server server.py:
from flask import Flask
app = Flask(__name__)
@app.route("/members")
def members():
return {"members": ["Member1", "Member2", "Member3"]}
if __name__ == "__main__":
app.run(debug=True)
Server is running on localhost:5000 (127.0.0.1:5000), 100% sure.
Have tried shifting the proxy between localhost:5000 and 127.0.0.1:5000, and both of these don't seem to make a difference and lead to that same error message.
I've also tried adjusting the fetch request to hit the members path directly (so either hitting http://127.0.0.1:500/members, or http://localhost:5000/members), and am initially hit with an error telling me to set my request mode to 'no-cors', followed by a new error signature:
App.jsx:10 Uncaught (in promise) SyntaxError: Unexpected end of input (at App.jsx:10:18)
at App.jsx:10:18
When I set the mode to 'no-cors', I'm still hit with the above error message even though the CORS policy one disappears.
Not entirely sure how to proceed from here...