React proxy uses the wrong url

Question

I have react app with proxy to my node js server http://localhost:3000 and http://localhost:9000 In my package.json react app:

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:9000",
...

Some request wrong works. Example: I on http://localhost:3000/admin on my react app and i create request to server

fetch('admin/check-token',
                {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization':Cookie.getCookie(TOKEN)
                    },
                })
                .then(response => {
                    return response.json();
                })
                .then((json) => {
                    console.log(json)
                })
                .catch(function (res) {
                    console.log(res)
                })

I need request to http://localhost:9000/admin/check-token, but i have error and chrome show me that i send request to http://localhost:9000/admin/admin/check-token. As I understand it, the extra /admin is taken from http://localhost:3000/admin. What am I doing wrong?

RaR · Accepted Answer · 2019-12-11 08:34:50Z

2

Your browser URL(window.location.href) is http://localhost:3000/admin and the URL string provided for fetch is admin/check-token. They are getting appended, as per the design. To use only the domain part from browser URL, start your URL string of fetch with /, like,

fetch('/admin/check-token', ...)

Or you can provide the fully qualified URL, like,

fetch('http://localhost:3000/admin/check-token', ...)

answered Dec 11, 2019 at 8:34

RaR

3,2433 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tim · Accepted Answer · 2019-12-11 09:12:27Z

You would only have to use two /admin if you have your express routes, for example in your main file you have

app.use('/admin', adminRoutes)

Then in your admin routes

 adminRoutes.post('/admin', (req, res) => {
  // do stuff
  })

Then your fetch would look like

fetch('http://localhost/admin/admin', {
  method: "POST" //etc...
  })

But if you are using jsonwebtoken you should be using middleware on the backend

adminRoutes.post('/adminTasks', authenticateToken, (req, res) => {
  // if authenticateToken do stuff
})

I will show the authenticateToken function for a better example

function authenticateToken(req, res, next){
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];
    if(token == null) { return res.sendStatus(401) }

    jwt.verify(token, process.env.ACCESS_TOKEN, (err, user) => {
        if(err) { return res.sendStatus(403) }
        req.user = user;
        next();
    })

}

Collectives™ on Stack Overflow

React proxy uses the wrong url

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related