Proxy not working

[jmmadsen]

Hey all,

I'm about to lose my mind here. I've used "proxy": "http://localhost:8080" in my package.json for numerous other CRA projects to connect to my Express backend with no issues. However, in my new project I cannot get it to work. I've even installed http-proxy-middleware and create a setupProxy.js, but with no luck. No matter what I do, my axios requests keep hitting localhost:3000 (where my CRA is running).

This is my package.json:

{
  "name": "user_interface",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:8080"
}

And this is my App.js with relevant routing.

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { AuthContext } from "./Context/Auth";
import PrivateRoute from './PrivateRoute';
import Login from './Components/Login/Login';
import SignUp from './Components/Login/SignUp';
import Home from './Components/Home/Home';


const App = () => {

  return (
    <AuthContext.Provider value={false}>
      <div className="App">
        <Router>
          <Switch>
            <PrivateRoute path="/home" component={Home}/>
            <Route path="/signup" component={SignUp}/>
            <Route exact path="/" component={Login}/>
          </Switch>
        </Router>
      </div>
    </AuthContext.Provider>
  );

}

export default App;

Any ideas? I've restarted my computer multiple times.

[ChristianMurphy]

@jmmadsen what is the content of your setupProxy.js file?
Did you follow the instructions from https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually ?

[jmmadsen]

I actually figured it out and forgot to update, will mark the answer below.

[jmmadsen]

So it turns out that it actually was hitting my API on localhost:8080, but in the network tab it still just shows as hitting localhost:3000. This is what was confusing me. Also, I had a slight typo in my route in the API, so this is why my API was not logging anything either.

The proxy makes it look like its still just hitting the same port as React in the Network tab.

[Brodan]

Holy crap, I'm so glad I found this answer because I was going insane and dealing with the exact same issue just now. Spent 2 hours trying to figure out why proxy in my package.json wasn't doing anything and it turns out it was and the network tab just wasn't making that clear.
Thank you!!!!

[rmnrdi]

WTF! Why?????????
Why does the address bar show the non-proxy address?

I wasted about 2 hours of my life as well. Time I'll never be able to get back....

[m1dok]

at least you've learned to take at least two tests, and not trust just one side

[zeevnoiman]

If you got here but your solution is not the wrong URL.
Maybe this can help you
https://stackoverflow.com/questions/45367298/could-not-proxy-request-pusher-auth-from-localhost3000-to-http-localhost500

if you are in mac do not use http://localhost:<PORT_NUMBER>, use http://127.0.0.1 :<PORT_NUMBER> instead

[starahi13]

not working

[faizan2077]

It can be solved by using cors in server side where we can add our origin:
First Install cors using npm i cors command and implement the following with express before every route url
app.options('*', cors()) // include before other routes

[qiweimao]

It worked! Freaking Mac is a different animal!

[starahi13]

I soloved it sir

…

On Thu, Mar 16, 2023, 9:41 PM Elmehdi Karkaba ***@***.***> wrote: at least you've learned to take at least two tests, and not trust just one side — Reply to this email directly, view it on GitHub <#10149 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2QQVP5R65ZSSUTL55BY4PLW4MYCZANCNFSM4UCTI4SQ> . You are receiving this because you commented.Message ID: ***@***.*** com>