Voting App: React, NodeJS, Express and Heroku. HTTPS inconsistency error

#1

For some reason I can’t get my express routes to work when I deploy to Heroku. The only time I get the routes to work is when I’m using HTTP instead of HTTPS to access the application. However, I can get my routes to work on HTTPS with Internet Explorer and Microsoft Edge, but not with Google Chrome and Mozilla Firefox. This just seems really inconsistent, I’ve been battling with this for 5-hours, it’s either React, Express, Node or Heroku is buggy, either way I’m feeling to start back coding in .NET again.

Any assistance rendered will be greatly appreciated.

#2

Can you link to your github repo for it so we can take a look?

Oh, and the Heroku app url?

#3

Could that be perhaps CORS? Are there any errors in your Chrome console?

#4

Hi @JacksonBates,

Please see below Heroku Deployment:
http://youvote-fcc.herokuapp.com
https://youvote-fcc.herokuapp.com

The HTTP works just fine. The HTTPS only works on IE and Edge.
You can test by using the Logout option in the left-pane.

The logout server-side route clears any active sessions and redirects the user. However on Chrome and Firefox, when using HTTPS, this does not happen and instead the app.get(’*’) route is called and the user request is then handled by React Router. I checked my logs and the logout route is actually being reached, but the action from the express server isn’t being passed to the client-side once using HTTPS. The order of the routes should not allow this to happen. Plus it only happens on HTTPS with these browser so it’s very strange.

#5

Hi @michal9909,

I thought that, but I have no console errors at all to indicate this.

#6

I found the issue. It has to do with the Service Worker Registration present in the index.js file when using React-Create-App. I changed the import statement to get the { unregister } method, then removed the registerService method and called the unregister at the same location. This is how my index file looks now.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { unregister } from './registerServiceWorker';
import reduxThunk from 'redux-thunk';

import App from './components/App';
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
//Un-register Service Worker
unregister();
1 Like