Any idea why index.css would start showing up as the :id in axios requests?
In order to deploy to Heroku, I set up a proxy in React "proxy": "http://localhost:3001/". However, since setting up the proxy in both prod and dev environments I've been getting a really strange issue with the :id field in calls on page refresh (only page refresh).
For whatever reason, index.css is being appended so a normal page refresh request for axios.get(/document/:id) throws this error: Proxy error: Could not proxy request /document/index.css from localhost:3000 to http://localhost:3001/ and this is what hits the backend: GET /document/index.css In this example, :id was supposed to be params.id.
This is happening to all routes defined in <Router> as /path/:id regardless of whether I hard code in an :id value or use a dynamic one.
This issue does not occur when I test with an earlier version where the proxy is not set up and localhost:3000 is hard coded into all axios routes.
I'm happy to provide further explanation/examples. Really scratching my head here, any idea what's going on? Thank you very much!
Edit: Requested Public index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="dropdown-options"></div>
<div id="root"></div>
</body>
</html>
I believe your problem lies with how you're importing your css file.
so try linking it as such ommiting the . - <link rel='stylesheet' href='/index.css'
let me know if that solved your problem