0

React.js: i have a google login button, that looks something like this

const GoogleButton = () => (
<a href='/auth/google' >
    <div className='google-icon-wrapper'>
        <img className='google-icon' src= {googleLogo} alt='Google logo'/>    
    </div>
    <p className ='google-btn-text'>
        Sign in with google
    </p>
</a>

)

React.js (http-proxy-middleware) in development mode i also have proxy settings

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(proxy("/auth/", { target: "http://localhost:5000/" }));
  app.use(proxy("/api/", { target: "http://localhost:5000/" }));
};

Node.js : I have this endpoint, and it doesn't work on production since the proxy does not work on the production

app.get('/auth/google', passport.authenticate('google', {
  scope: SCOPE,
  access_type: 'offline',
})

);

**when I click on the button, on the production, react sends me to the page - for example: www.example.com/auth/google - but must call node endpoint ** but when i make a fetch request then the node endpoint works, for example, if I do this: fetch ('/api/google'), it will work ..

UPDATE : the problem was in the React serviceWorker.js - PWA ... it cached the result and the link .. i think not sure ..

Джим Гольман
  • 1
  • 1

1 Answers1

0

If you are identifying http://localhost:5000/ as the host and port on prod for node.js explicitly it can be tricky. Some platforms, like heroku are binding the port automatically so you don't know exactly which is it. Try to use a env variable for HOST getting from env and try to bind in the proxy like http://localhost:${host}/

Eduard
  • 1,768
  • 2
  • 10
  • 14