React: Filename appended to url-CodePudding

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>

CodePudding user response：

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